Git Product home page Git Product logo

rc-datetime-picker's Introduction

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.

rc-datetime-picker's People

Contributors

allenwooooo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

rc-datetime-picker's Issues

componentDidUpdate

Hi All –
I'm getting a deprecation WARNING. Any plan to fix-it?

backend.js:6 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
  • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Calendar, Day, Month, ReactSlider, Time, Year

Handle date change (and ability to close) at minPanel level

I currently use "Picker" with minPanel prop to allow to display the component to select only years or months.

I have 2 issues with the actual implementation :

  • I cannot close the panel when my selection is done (closeOnSelectDay prop works only if dayPanel is the current one)
  • onChange is triggered each time I display a panel, even if the user does not make selection at all (ex navigatiin in years)

I propose to take care of the minPanel option to trigger change only when the min panel is the current one, and evaluate "closeOnSelect" under this condition.

Below is a diff of a possible implementation.
Are you open to a PR about this ?

//Trigger.jsx
handleChange = (moment, currentPanel) => {
-    const {closeOnSelectDay, onChange} = this.props;
+    const {closeOnSelectDay, onChange, minPanel = 'day'} = this.props;
 
-    if (currentPanel === 'day' && closeOnSelectDay) {
-      this.setState({
-        isOpen: false
-      });
-    }
+    if (currentPanel === minPanel {
+      if (closeOnSelectDay) {
+        this.setState({
+          isOpen: false
+        });
 
-    onChange && onChange(moment);
-  }
+        onChange && onChange(moment);
+      }
+   }
``

problem with react 15.4.0

hi, allen

we have a problem with react 15.4.0

Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /home1/irteam/.jenkins/jobs/NFAS_WEB_ND/workspace/node_modules/rc-datetime-picker/dist

can you fix this problem ?

click outside input but DatetimePickerTrigger not close

In parent component, when i click outside input DatetimePickerTrigger auto close, but in child component(that is a modal boostrap), i using DatetimePickerTrigger but when i click outside DatetimePickerTrigger not close. Anyone can help me ? thanks

add support for minTime && maxTime

Awesome library! Thanks.

In addition to the current minDate and maxDate, it would be most welcome if the library also supported a minTime and maxTime. For example to disable reservations in the evenings.

Improve touch support

It's currently not really working smooth on a touch device (smartphone or laptop with touch screen)

Dayjs Implementation

I like the library very much, but using moment.js was a problem for us, so I made the project work with dayjs. I did not create a fork and open a Pull request because the two projects will proceed differently than each other. Also, this place has not been receiving updates for a long time.

rc-datetime-picker-dayjs

Why can't I set format to DatetimePickerTrigger?

Or I can and I'm not seeing how? All I want to do is set DD/MM/YYYY HH:mm like this:

<DatetimePickerTrigger
    format='DD/MM/YYYY HH:mm'
    weeks={weeks}
    moment={this.state.date}
    onChange={this.handleChangeDate}>
    <input type="text" value={this.state.date.format('YYYY-MM-DD HH:mm')} readOnly/>
</DatetimePickerTrigger>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.