https://github.com/smrsan76/imrc-datetime-picker

(Improved) React component datetime picker by momentjs :calendar:
https://github.com/smrsan76/imrc-datetime-picker

component date datepicker datepicker-component datetime hacktoberfest improved jalaali jalaali-datepicker js-org moment moment-jalaali momentjs npm-package picker react react-js solar solar-datepicker

Last synced: 5 months ago
JSON representation

(Improved) React component datetime picker by momentjs :calendar:

• Host: GitHub
• URL: https://github.com/smrsan76/imrc-datetime-picker
• Owner: smrsan76
• License: mit
• Created: 2018-09-14T22:58:28.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-23T20:30:16.000Z (almost 5 years ago)
• Last Synced: 2024-10-29T23:07:30.386Z (11 months ago)
• Topics: component, date, datepicker, datepicker-component, datetime, hacktoberfest, improved, jalaali, jalaali-datepicker, js-org, moment, moment-jalaali, momentjs, npm-package, picker, react, react-js, solar, solar-datepicker
• Language: JavaScript
• Homepage: https://imrc-datetime-picker.js.org/
• Size: 2.42 MB
• Stars: 21
• Watchers: 3
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# (Improved) Rc-Datetime-Picker

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

[![NPM](https://nodei.co/npm/imrc-datetime-picker.png)](https://nodei.co/npm/imrc-datetime-picker/)

Thanks to [~allenwu](https://www.npmjs.com/~allenwu) for authoring the base package [`rc-datetime-picker`](https://npmjs.com/package/rc-datetime-picker)

[**See The `ChangeLog` Here**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/CHANGELOG.md)

> Note: Check the [**TODO.md**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/TODO.md)

> file before usage. Maybe some features are still **buggy 💀** since the [`rc-datetime-picker`](https://npmjs.com/package/rc-datetime-picker) package

> or recently in the current package.

## Requirements

- React

- [Moment.js] or [Moment-jalaali]

- Modern browsers (IE>=9 is required)

## 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.

[moment.js]: http://momentjs.com/

[moment-jalaali]: https://npmjs.com/package/moment-jalaali

[demo]: https://smrsan76.github.io/imrc-datetime-picker/

## 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**](https://github.com/smrsan76/imrc-datetime-picker/blob/master/CONTRIBUTING.md)

to contribute with us.