JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25
  • Score
    100M100P100Q69332F
  • License MIT

(Improved) React component datetime picker by momentjs

Package Exports

  • imrc-datetime-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (imrc-datetime-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

(Improved) Rc-Datetime-Picker

Imrc-Datetime-Picker is a react component for datetime picker by Moment.js.

NPM

Thanks to ~allenwu for authoring the base package rc-datetime-picker

See The ChangeLog Here

Note: Check the TODO.md file before usage. Maybe some features are still buggy 💀 since the rc-datetime-picker package or recently in the current package.

Requirements

Installation

Install with NPM

$ npm install imrc-datetime-picker

Manual download

Besides npm package, UMD module and styles are placed under dist/ directory:

  • dist/imrc-datetime-picker.js
  • dist/imrc-datetime-picker-min.js
  • dist/imrc-datetime-picker.css
  • dist/imrc-datetime-picker.min.css

Usage

See the demo page.

Props

General Props

Name Type Default Description Version
moment moment Set the selected date.
onChange Function(datetime: moment) `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: moment} | Object:{name: { moment, callback }} Add shortcuts on the top `shortcuts-bar` for selecting a date. It supports callback option in v2.1.1 and above.
maxDate moment Max Date limit.
minDate moment 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.
isSolar Boolean 'day' Solar date mode. Notice that you should use moment-jalaali package instead of moment. >=2.x
lang String undefined (or 'en') Language name. ('en', 'fa') is supported. Notice that you should use moment-jalaali package instead of moment, if you want to use 'fa' language. >=2.x

*Trigger Props

Name Type Default Description Version
disabled Boolean false Disabled triggering.
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.
position String 'bottom' The position of popup. >= v1.0.0

*Range Props

Name Type Default Description Version
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: moment, end: moment} 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.

Contributing

We really appreciate your contributions.

You can follow the rules of Contributing guide to contribute with us.