intl-datepicker

import 'intl-datepicker';
import 'intl-datepicker/calendars/persian';
import 'intl-datepicker/labels/fa'; // Persian UI strings (optional)

import 'intl-datepicker/full'; // includes all calendar systems and label sets

import 'intl-datepicker';
import 'intl-datepicker/labels/fa';

const picker = document.querySelector('intl-datepicker');

// Properties
picker.value;           // ISO string
picker.valueAsDate;     // native Date or null
picker.displayValue;    // formatted display string
picker.calendarValue;   // CalendarDate object
picker.rangeStart;      // ISO string or null (range/week)
picker.rangeEnd;        // ISO string or null (range/week)
picker.selectedDates;   // CalendarDate[] (multiple)

// Methods
picker.getValue();              // full SelectDetail or null
picker.setValue('2026-04-05');   // set value programmatically
picker.clear();                 // clear selection
picker.open();                  // open popup
picker.close();                 // close popup
picker.goToMonth(2026, 6);      // navigate to a specific month

// Callbacks (set via JS only)
picker.mapDays = ({ date, isToday, isDisabled }) => {
  if (date.dayOfWeek === 5) return { className: 'friday', content: '🎉' };
};

picker.disabledDatesFilter = ({ year, month, day }) => {
  return day === 13; // disable all 13ths
};

// Alias for disabledDatesFilter
picker.isDateDisabled = (date) => date.day === 13;

picker.presets = [
  { label: 'This week', value: '-6d/today' },
  { label: 'This month', value: 'monthStart/monthEnd' },
];

picker.mapDays = (info) => {
  // info: { date, isToday, isSelected, isDisabled, isInRange,
  //         isRangeStart, isRangeEnd, isCurrentMonth }
  // date: { year, month, day, dayOfWeek }

  return {
    className: 'my-class',  // extra CSS class
    style: 'color: red',    // inline style
    content: '<span>!</span>', // HTML appended inside cell
    disabled: true,          // force-disable this day
    hidden: true,            // hide this cell
    title: 'Tooltip text',  // title attribute
  };
};

import IntlDatepicker from 'intl-datepicker/react';

function App() {
  const ref = useRef(null);

  return (
    <IntlDatepicker
      ref={ref}
      calendar="persian"
      locale="fa-IR"
      type="range"
      inline
      onSelect={(detail) => console.log(detail)}
      onChange={(detail) => console.log(detail)}
      onNavigate={(detail) => console.log(detail)}
      onOpen={(e) => { /* return false to prevent */ }}
      onClose={(e) => { /* return false to prevent */ }}
    />
  );
}

ref.current.element;        // underlying HTMLElement
ref.current.value;          // ISO string
ref.current.displayValue;   // formatted string
ref.current.calendarValue;  // CalendarDate
ref.current.selectedDates;  // CalendarDate[]
ref.current.getValue();     // SelectDetail
ref.current.setValue('2026-04-05');
ref.current.clear();
ref.current.open();
ref.current.close();
ref.current.goToMonth(2026, 6);