AllenWooooo / Rc Datetime Picker
Licence: mit
React component for datetime picker by Moment.js
Stars: ✭ 85
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rc Datetime Picker
imrc-datetime-picker
(Improved) React component datetime picker by momentjs 📆
Stars: ✭ 21 (-75.29%)
Mutual labels: datetime, date, datepicker, moment, picker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+530.59%)
Mutual labels: date, datetime, moment, picker, datepicker
Angular Bootstrap Datetimepicker
Native Angular date/time picker component styled by Twitter Bootstrap
Stars: ✭ 1,289 (+1416.47%)
Mutual labels: datetime, moment, picker, datepicker, datetimepicker
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (+125.88%)
Mutual labels: date, moment, picker, datepicker
Tempus Dominus
A powerful Date/time picker widget.
Stars: ✭ 6,900 (+8017.65%)
Mutual labels: datetime, picker, datepicker, datetimepicker
Vue Datetime
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
Stars: ✭ 928 (+991.76%)
Mutual labels: date, datetime, datepicker, datetimepicker
react-calendar-datetime-picker
A simple and fast date and time picker component for React
Stars: ✭ 58 (-31.76%)
Mutual labels: datetime, date, datepicker, picker
Jedate
jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！
Stars: ✭ 433 (+409.41%)
Mutual labels: date, datetime, datepicker, datetimepicker
Horizontalpicker
DatePicker horizontal con selección smooth por día para Android.
Stars: ✭ 116 (+36.47%)
Mutual labels: date, datetime, picker, datepicker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器，支持无限循环滚动，不依赖第三方库
Stars: ✭ 26 (-69.41%)
Mutual labels: date, datepicker, picker, datetimepicker
Dayjs
⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API
Stars: ✭ 37,373 (+43868.24%)
Mutual labels: date, datetime, moment
Zebra datepicker
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin
Stars: ✭ 367 (+331.76%)
Mutual labels: date, datetime, datepicker
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-63.53%)
Mutual labels: date, picker, datepicker
Datetimepicker
jQuery Plugin Date and Time Picker
Stars: ✭ 3,402 (+3902.35%)
Mutual labels: picker, datepicker, datetimepicker
Pickerjs
⚠️ [Deprecated] No longer maintained. JavaScript date time picker.
Stars: ✭ 299 (+251.76%)
Mutual labels: picker, datepicker, datetimepicker
Date Io
Abstraction over common javascript date management libraries
Stars: ✭ 382 (+349.41%)
Mutual labels: date, datetime, moment
Persianrangedatepicker
Persian range date picker for android.
Stars: ✭ 48 (-43.53%)
Mutual labels: date, picker, datepicker
dayjs
Extended fork of Day.js - 2KB immutable date library alternative to Moment.js
Stars: ✭ 36 (-57.65%)
Mutual labels: datetime, date, moment
Mdatepickerview
Quick and easy date picker.
Stars: ✭ 373 (+338.82%)
Mutual labels: date, picker, datepicker
Intl Date Time
International DateTime for Laravel Nova
Stars: ✭ 50 (-41.18%)
Mutual labels: date, datepicker, datetimepicker
Rc-Datetime-Picker
Rc-Datetime-Picker is a react component for datetime picker by Moment.js.
Requirements
- React
- Moment.js
- Modern browsers (IE>=9 is required)
Installation
Install with NPM
$ npm install rc-datetime-picker
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 |
|---|---|---|---|
| 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: value} | Add shortcuts on the top `shortcuts-bar` for selecting a date. | |
| 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. |
DatetimePickerTrigger Props
| Name | Type | Default | Description |
|---|---|---|---|
| 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. | |
| 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 | 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. |
| 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 |
|---|---|---|---|
| moment | Object: {start: moment, end: moment} | Set the selected date range. | |
| onChange | Function(datetime: {start: moment, end: moment}) | `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: moment, end: moment}} | Add shortcuts on the top `shortcuts-bar` for selecting a date range. | |
| 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. |
| 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. | |
| minPanel | String | 'day' | Min panel for select. |
DatetimeRangePickerTrigger Props
| Name | Type | Default | Description |
|---|---|---|---|
| moment | Object: {start: moment, end: moment} | Set the selected date range. | |
| onChange | Function(datetime: {start: moment, end: moment}) | `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: moment, end: moment}} | Add shortcuts on the top `shortcuts-bar` for selecting a date range. | |
| 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. |
| 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. | |
| appendToBody | Boolean | false | Whether to render the picker to `body`. |
| disabled | Boolean | false | Disabled triggering. |
| minPanel | String | 'day' | Min panel for select. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].