@jalik/react-datetime-picker

    1.0.2 • Public • Published

    @jalik/react-datetime-picker

    GitHub package.json version GitHub GitHub last commit GitHub issues npm

    Introduction

    This lib allows you to add datetime inputs in your React applications with the following advantages.

    • Available in CJS and ESM
    • Multiple selection views (year, month, day, time, hour, minute, second)
    • Support for min and max datetime
    • Support for custom day renderer
    • Customizable datetime format
    • Customizable view (locale, week numbers, timezone...)
    • Works like a normal input (onChange/value)
    • Based on Intl API to support any language (English, French, Chinese...)
    • Based on luxon for date and time manipulation

    NOTICE : The code has been tested with controlled components only.

    Calendar Calendar Calendar Calendar Calendar Calendar

    Quickstart

    The code below shows how to add a datetime input field with a default value and handling its changes.

    import { DateTimeInput } from '@jalik/react-datetime-picker';
    import React, {
      useCallback,
      useState
    } from 'react';
    
    // Don't forget to load default styles.
    import '@jalik/react-datetime-picker/src/styles.css';
    
    function App() {
      const [date, setDate] = useState(new Date().toISOString());
    
      const handleChange = useCallback((event) => {
        setDate(event.target.value);
      }, [])
    
      return (
        <div>
          <DateTimeInput
            format="D tt"
            locale="fr"
            name="date"
            onChange={handleChange}
            showCalendarIcon
            showCalendarOnFocus
            showTimeZone
            showWeekNumbers
            value={date}
          />
        </div>
      )
    }

    Props

    calendarIcon: string

    Allow to change the calendar icon in the input field.

    disabled: bool

    Set to true to avoid changes of the input value.

    format: string

    Allow to set a custom format for parsing/formatting the date in the input field.
    Formatting is based on Luxon (https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens).
    The default value is D tt (localized date and time).

    locale: string

    Set the locale to use when displaying dates, month... (based on the Intl API).
    The default value is navigator.language.

    Example of different locales (fr-FR, ru, zh):

    Calendar Calendar Calendar

    max: string

    Pass an ISO date string that is the maximal valid datetime.

    Example with 2021-06-10T23:59:59.000-10:00:

    Calendar

    min: string

    Pass an ISO date string that is the minimal valid datetime.

    Example with 2021-06-10T00:00:00.000-10:00:

    Calendar

    renderDay: function

    Pass a function or functional component to customize days rendering.

    showCalendarIcon: bool

    Set to true to display the calendar icon in the input field.

    showCalendarOnFocus: bool

    Set to true to open the calendar when the input receives the focus (by click or keyboard).

    showTimeZone: bool

    Set to true to display the current timezone in the calendar.

    showWeekNumbers: bool

    Set to true to display week numbers in the calendar.

    value: string

    Used to pass the date in the format defined with format.

    Customization

    renderDay: function

    The example below shows how to disable selection of week-end days.

    import {
      CalendarDay,
      DateTimeInput
    } from '@jalik/react-datetime-picker';
    import React, {
      useCallback,
      useState
    } from 'react';
    
    // Don't forget to load default styles.
    import '@jalik/react-datetime-picker/src/styles.css';
    
    // Custom component that renders week-end days in red.
    function CustomDayCell(props) {
      const { dateTime, currentMonth, selectedDateTime } = props;
      const isWeekEnd = dateTime.weekday > 5;
      const style = isWeekEnd ? { color: 'red' } : {};
      // We use the default component for rendering day, so we have less code to write.
      // But we could use another component with a complete different logic.
      return <CalendarDay {...props} style={style} />;
    }
    
    function App() {
      const [date, setDate] = useState(new Date().toISOString());
    
      const handleChange = useCallback((event) => {
        setDate(event.target.value);
      }, [])
    
      return (
        <div>
          <DateTimeInput
            name="date"
            onChange={handleChange}
            renderDay={CustomDayCell}
            value={date}
          />
        </div>
      )
    }

    Changelog

    History of releases is in the changelog.

    License

    The code is released under the MIT License.

    Install

    npm i @jalik/react-datetime-picker

    DownloadsWeekly Downloads

    137

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    225 kB

    Total Files

    83

    Last publish

    Collaborators

    • jalik