calendar

A React component for persian date and time input

Feb 25, 2020
A React component for persian date and time input

React component for date and time input

A persian(jalaali, jalali, shamsi) date input with picker, which allows the user to type or select the date from the picker.

The component is compatible with react 16.

This module is written using jalaali-js, which is a light js library for jalaali date.

This module is written with inspiration of react-advance-jalaali-datepicker.

Why an other date picker

There are multiple jalaali date and time pickers on npm and github, but there is a lack of simplicity and compatibility. This lib is aim to be compatible with React 16 and also be compatible with other field inputs. The components simply get a value and a name as props, and fires onChange with event argument. The event object has target property containing the name and new value, so it can be put in a form just like any other input in that form and share the handleChange function. Beside this module is moment free to have a smaller final boundle size.

View Demo View Github

Features

  • Date / DateTime fields.
  • Farsi digits are rendered, and the farsi keyboard is supported as well as latin.
  • Date picker, with month click and year click to change.
  • Ability to type the date.
  • Focus to the next field on enter.
  • Correct tab indexes, day->month->year->hour->minute.
  • Highlighting today.
  • Align the picker to the right of the main input.
  • Compatible input onChange event.
  • Gregorian support and converter.

Installation

Use npm i react-hichestan-datetimepicker in order to install the module.

Usage

The component is quite the same as any other similar input, that means no label and decoration is provided for the component.

import {DateTimeInput, DateTimeInputSimple, DateInput, DateInputSimple} from 'react-hichestan-datetimepicker';

and in the render function :

<DateTimeInput value={this.state.myDateTime} name={'myDateTime'} onChange={this.handleChange}/> <DateTimeInputSimple value={this.state.myDateTime} name={'myDateTime'} onChange={this.handleChange}/> <DateInput value={this.state.myDateTime} name={'myDateTime'} onChange={this.handleChange}/> <DateInputSimple value={this.state.myDateTime} name={'myDateTime'} onChange={this.handleChange}/>

and handle the change like normal input:

handleChange = (event) => { const newState = {}; newState[event.target.name] = event.target.value; this.setState(newState); };

component types:

nameDescription
DateTimeInputshows a box allowing you to type or pick a date and a time

-DateTimeInput

PropertyTypeRequiredDefault valueDescription
namestringnoThe name that will be set while firing the onChange event in the target object
onChangefuncnoCallback function that is fired when the date value changes. @param {string} date and time, The new date and time in iso 8601 format like 2018-08-23T21:06:50Z. it is always UTC
autoOkboolnotrueIf true, automatically accept and close the picker on select a date.
closeLabelnodenoOverride the default text of the 'OK' button.
styleobjectnoOverride the inline-styles of the root element.
classNamestringnoThe css class name of the root element.
dialogContainerStyleobjectnoOverride the inline-styles of DatePickerDialog's Container element.
dialogContainerClassNameobjectnoOverride the inline-styles of DatePickerDialog's Container element.
disabledboolnoDisables the DateTimeInput.
readOnlyboolnomakes the DateTimeInput readonly.
onClickfuncnoCallback function that is fired when a click event occurs on the Date Picker's `TextField`[email protected] {object} event Click event targeting the `main div element`.
onDismissfuncnoCallback function that is fired when the Date-Time input's dialog is dismissed.
onFocusfuncnoCallback function that is fired when the Date-Time input's `main div` gains focus.
onShowfuncnoCallback function that is fired when the Date-Time input's dialog is shown.
filterDatefuncnoa function to filter some dates, return true means that it accept the date and false is to reject it. it gives a date 'jYYYY/jMM/jDD' format as the first parameter
valueunionnoSets the value for the Date-Time input.

Date and Time format

As we always save the date and time in back-end in timestamp, it does not make sense to send the data in any other format than ISO 8601 date which I find the best date format.

On Mobile

On mobile the out side click works only if the page size and the view matches. In some cases the out side click div element cannot occupy all the page.

ToDo

  • In mobile device it is not a good experience to type in input text, having select make more sense.
  • Data formatter function injection, to let the developer set and get the value in any other format that the back-end needs.

Contribution

Feel free to fork and add some feature. If you have time to do improvement on the U/I that will be appreciated.
If some one for any reason wants to sand the date and time format in any other format than ISO 8601, we need to inject a date and time formatter into the component.

To start, make a clone and run:

npm install npm start

and browse http://localhost:3000

For publishing

./build-examples.sh npm run build npm publish

Acknowledgement

The project is bootstrapped by create-component-lib.

Thanks to the jalaali-js, library.

This module is written with inspiration of react-advance-jalaali-datepicker.

Thanks for the beautiful font Nahid

GitHub

Related React stuff

Recommended