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:

name	Description
DateTimeInput	shows a box allowing you to type or pick a date and a time

-DateTimeInput

Property	Type	Required	Default value	Description
name	string	no		The name that will be set while firing the onChange event in the target object
onChange	func	no		Callback 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
autoOk	bool	no	true	If true, automatically accept and close the picker on select a date.
closeLabel	node	no		Override the default text of the 'OK' button.
style	object	no	<See the source code>	Override the inline-styles of the root element.
className	string	no		The css class name of the root element.
dialogContainerStyle	object	no		Override the inline-styles of DatePickerDialog's Container element.
dialogContainerClassName	object	no		Override the inline-styles of DatePickerDialog's Container element.
disabled	bool	no		Disables the DateTimeInput.
readOnly	bool	no		makes the DateTimeInput readonly.
onClick	func	no		Callback function that is fired when a click event occurs on the Date Picker's `TextField`.@param {object} event Click event targeting the `main div element`.
onDismiss	func	no		Callback function that is fired when the Date-Time input's dialog is dismissed.
onFocus	func	no		Callback function that is fired when the Date-Time input's `main div` gains focus.
onShow	func	no		Callback function that is fired when the Date-Time input's dialog is shown.
filterDate	func	no		a 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
value	union	no		Sets 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.