rc-datetime-picker-dayjs

    1.0.1 • Public • Published

    Rc-Datetime-Picker

    Rc-Datetime-Picker is a react component for datetime picker by day.js.

    This project is the updated version with day.js of the Rc-Datetime-Picker project using moment.js.

    Requirements

    • React
    • day.js
    • Modern browsers (IE>=9 is required)

    Installation

    Install with NPM

    $ npm install rc-datetime-picker-dayjs
    

    Manual download

    Besides npm package, UMD module is placed under dist/ directory:

    • dist/rc-datetime-picker.js
    • dist/rc-datetime-picker.min.js

    Usage

    See the demo page.

    Props

    DatetimePicker Props

    Name Type Default Description
    dayjs dayjs Set the selected date.
    onChange Function(datetime: dayjs) `onChange` will be triggered while datetime changing.
    className String Additional css class of root dom node.
    isOpen Boolean true Whether to show the picker.
    showCalendarPicker Boolean true Whether to show the calendar picker.
    showTimePicker Boolean true Whether to show the time picker.
    splitPanel Boolean false Enable `split-panel` mode.
    shortcuts Object:{name: value} Add shortcuts on the top `shortcuts-bar` for selecting a date.
    maxDate dayjs Max Date limit.
    minDate dayjs Min Date limit.
    weeks Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Text for weekdays.
    months Array [Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Text for months.
    dayFormat String 'MMMM, YYYY' Formatting current date of the day panel.
    minPanel String 'day' Min panel for select.

    DatetimePickerTrigger Props

    Name Type Default Description
    dayjs dayjs Set the selected date.
    onChange Function(datetime: dayjs) `onChange` will be triggered while datetime changing.
    className String Additional css class of root dom node.
    showCalendarPicker Boolean true Whether to show the calendar picker.
    showTimePicker Boolean true Whether to show the time picker.
    splitPanel Boolean false Enable `split-panel` mode.
    shortcuts Object:{name: value} Add shortcuts on the top `shortcuts-bar` for selecting a date.
    maxDate dayjs Max Date limit.
    minDate dayjs Min Date limit.
    weeks Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Text for weekdays.
    months Array [Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Text for months.
    dayFormat String 'MMMM, YYYY' Formatting current date of the day panel.
    appendToBody Boolean false Whether to render the picker to `body`.
    closeOnSelectDay Boolean false Whether to close the picker when selecting a date on day panel.
    disabled Boolean false Disabled triggering.
    minPanel String 'day' Min panel for select.

    DatetimeRangePicker Props

    Name Type Default Description
    dayjs Object: {start: dayjs, end: dayjs} Set the selected date range.
    onChange Function(datetime: {start: dayjs, end: dayjs}) `onChange` will be triggered while confirm button or shortcuts clicked.
    className String Additional css class of root dom node.
    showCalendarPicker Boolean true Whether to show the calendar picker.
    showTimePicker Boolean false Whether to show the time picker.
    splitPanel Boolean false Enable `split-panel` mode.
    shortcuts Object:{name: {start: dayjs, end: dayjs}} Add shortcuts on the top `shortcuts-bar` for selecting a date range.
    maxDate dayjs Max Date limit.
    minDate dayjs Min Date limit.
    weeks Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Text for weekdays.
    months Array [Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Text for months.
    dayFormat String 'MMMM, YYYY' Formatting current date of the day panel.
    format String 'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD' Formatting current date of each panel.
    showCustomButton Boolean false Whether to show the custom button.
    customButtonText String Custom Text for custom button.
    customRange Object: {start: dayjs, end: dayjs} Last 30 days Set the custom button value.
    confirmButtonText String Confirm Text for confirm button.
    startDateText String Start Date: Text for start date label.
    endDateText String End date: Text for end date label.
    dateLimit Object: {name: value} Date range limt.
    minPanel String 'day' Min panel for select.

    DatetimeRangePickerTrigger Props

    Name Type Default Description
    dayjs Object: {start: dayjs, end: dayjs} Set the selected date range.
    onChange Function(datetime: {start: dayjs, end: dayjs}) `onChange` will be triggered while confirm button or shortcuts clicked.
    className String Additional css class of root dom node.
    showCalendarPicker Boolean true Whether to show the calendar picker.
    showTimePicker Boolean false Whether to show the time picker.
    splitPanel Boolean false Enable `split-panel` mode.
    shortcuts Object:{name: {start: dayjs, end: dayjs}} Add shortcuts on the top `shortcuts-bar` for selecting a date range.
    maxDate dayjs Max Date limit.
    minDate dayjs Min Date limit.
    weeks Array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Text for weekdays.
    months Array [Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Text for months.
    dayFormat String 'MMMM, YYYY' Formatting current date of the day panel.
    format String 'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD' Formatting current date of each panel.
    showCustomButton Boolean false Whether to show the custom button.
    customButtonText String Custom Text for custom button.
    customRange Object: {start: dayjs, end: dayjs} Last 30 days Set the custom button value.
    confirmButtonText String Confirm Text for confirm button.
    startDateText String Start Date: Text for start date label.
    endDateText String End date: Text for end date label.
    dateLimit Object: {name: value} Date range limt.
    appendToBody Boolean false Whether to render the picker to `body`.
    disabled Boolean false Disabled triggering.
    minPanel String 'day' Min panel for select.

    Install

    npm i rc-datetime-picker-dayjs

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    526 kB

    Total Files

    37

    Last publish

    Collaborators

    • emrahozdemir