نمونه‌های انتخاب بازه زمانی

بازه انتخاب شده: هیچ

<persian-datepicker-element 
  id="basic-range-picker" 
  range-mode
  show-holidays
></persian-datepicker-element>

بازه انتخاب شده: هیچ

<persian-datepicker-element 
  id="format-range-picker" 
  range-mode 
  format="YYYY/MM/DD"
  show-holidays
></persian-datepicker-element>

بازه انتخاب شده: هیچ

// تنظیم بازه اولیه به صورت برنامه‌ای
const initialRangePicker = document.getElementById('initial-range-picker');
initialRangePicker.setRange([1403, 3, 1], [1403, 3, 15]);

شروع بازه: هیچ
پایان بازه: هیچ
تعداد روزها: هیچ
تاریخ ISO شروع: N/A
تاریخ ISO پایان: N/A

document.getElementById('event-range-picker').addEventListener('change', (event) => {
  if (event.detail.isRange) {
    const { start, end, startISOString, endISOString } = event.detail.range;
    // مدیریت انتخاب بازه
  }
});

بازه انتخاب شده: هیچ

<persian-datepicker-element 
  id="styled-range-picker" 
  range-mode
  show-holidays
  style="
    --jdp-primary: #8b5cf6;
    --jdp-primary-hover: #7c3aed;
    --jdp-range-bg: rgba(139, 92, 246, 0.1);
    --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="limited-range-picker" 
  range-mode
  show-holidays
  min-date="[1403, 1, 1]"
  max-date="[1403, 12, 29]"
></persian-datepicker-element>