salla-datetime-picker

A date and time input backed by the Flatpickr library, which is loaded on demand. Use it where a customer picks a date or a time, for example a gift send date. It renders a text input inside the component and opens a calendar popup.

Options are passed to Flatpickr once, after the component first renders, so changing an option prop later has no effect. Props that take functions or DOM elements (disable, enable, formatDate, dateParser, appendTo, positionElement) must be set as JavaScript properties, not HTML attributes. Boolean props are set as attributes like enable-time or no-calendar.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-datetime-picker> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaDatetimePicker } from '@salla.sa/twilight-components-react/datetime-picker';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { useEffect } from 'react';
import { SallaDatetimePicker } from '@salla.sa/twilight-components-react/datetime-picker';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-datetime-picker').addEventListener('picked', e => console.log(e.detail));
  }, []);

  return (
    <SallaDatetimePicker name="send_at" enableTime time_24hr minDate="today" dateFormat="Y-m-d H:i" locale="ar" />
  );
}

PropertiesCopy Anchor Link

EventsCopy Anchor Link

Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).

RelatedCopy Anchor Link

Used inside: <salla-gifting>, <salla-product-options>, <salla-user-profile>.