نمونههای ساده از نحوه استفاده از کامپوننت انتخاب تاریخ با تنظیمات مختلف.
<persian-datepicker-element id="basic-picker"></persian-datepicker-element><persian-datepicker-element id="placeholder-picker" placeholder="تاریخ تولد خود را وارد کنید"></persian-datepicker-element><persian-datepicker-element id="format-picker" format="YYYY-MM-DD"></persian-datepicker-element>// تنظیم مقدار اولیه به صورت برنامهنویسی
const initialPicker = document.getElementById('initial-picker');
initialPicker.setValue(1403, 3, 15);document.getElementById('event-picker').addEventListener('change', (event) => {
const { jalali, gregorian } = event.detail;
document.getElementById('jalali-result').textContent = jalali.join('/');
document.getElementById('gregorian-result').textContent = gregorian.join('/');
});<persian-datepicker-element
id="styled-picker"
style="
--jdp-primary: #8b5cf6;
--jdp-primary-hover: #7c3aed;
--jdp-border-radius: 0.75rem;
--jdp-font-size: 15px;
--jdp-font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--jdp-font-feature-settings: 'ss02';
"
></persian-datepicker-element><persian-datepicker-element
id="persian-number-picker"
style="
--jdp-font-feature-settings: 'ss02';
--jdp-font-family: 'Vazir', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
"
></persian-datepicker-element>