Home

Awesome

Advance React Date and Time Picker for jalaali (persian, shamsi) calender

It contains 3 types of jalaali (persian) date pickers, which are date and time range (from, to) picker, date range picker, date picker, and date and time picker.

<p dir="rtl"> این ماژول شامل ۴ نوع مختلف از باکس انتخاب تاریخ و زمان جلالی (شمسی) است. انواع باکس های انتخاب تاریخ و زمان (پیاده سازی شده تا کنون) عبارتند از: بازه تاریخ و زمان (از، تا)، بازه تاریخ (از، تا)، انتخاب تاریخ و انتخاب تاریخ زمان.</p>

This module is written using moment-jalali, which is relied on momentjs.

Instalation

Use npm i react-advance-jalaali-datepicker in order to install the module. Yes that's it. There is no extra font or css file to include. It's designed simple to prevent any issue during customization. Customize it in the way you need.

Usage

In order to use this module, import the package into your react component and use the module as below. The below example is the code that is used in the sample usage video.

demo of react advance jalaali (persian) datepicker

import React from "react";
import {
  DatePicker,
  DateTimePicker,
  DateRangePicker,
  DateTimeRangePicker
} from "react-advance-jalaali-datepicker";
export class Home extends React.component {
  change(unix, formatted) {
    console.log(unix); // returns timestamp of the selected value, for example.
    console.log(formatted); // returns the selected value in the format you've entered, forexample, "تاریخ: 1396/02/24 ساعت: 18:30".
  }
  DatePickerInput(props) {
    return <input className="popo" {...props} />;
  }
  render() {
    return (
      <div className="datePicker">
        <DatePicker
          inputComponent={this.DatePickerInput}
          placeholder="انتخاب تاریخ"
          format="jYYYY/jMM/jDD"
          onChange={this.change}
          id="datePicker"
          preSelected="1396/05/15"
        />
        <DateTimePicker
          placeholder="انتخاب تاریخ و ساعت"
          format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm"
          id="dateTimePicker"
          onChange={this.changeTimeDate}
          preSelected="تاریخ: 1396/02/24 ساعت: 18:30"
        />
        <DateRangePicker
          placeholderStart="تاریخ شروع"
          placeholderEnd="تاریخ پایان"
          format="jYYYY/jMM/jDD"
          onChangeStart={this.change}
          onChangeEnd={this.changeTimeDate}
          idStart="rangePickerStart"
          idEnd="rangePickerEnd"
        />
        <DateTimeRangePicker
          placeholderStart="تاریخ و ساعت شروع"
          placeholderEnd="تاریخ و ساعت پایان"
          format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm"
          onChangeStart={this.change}
          onChangeEnd={this.changeTimeDate}
          idStart="rangePickerStart"
          idEnd="rangePickerEnd"
        />
      </div>
    );
  }
}

component types:

nameDescription
DatePickershows a box allowing you pick just a date
DateTimePickershows a box allowing you pick just a date and time
DateRangePickershows a box twice, allowing you pick two dates. The first box allows you to pick the beginnig date and second one lets you pick end date
DateTimeRangePickershows a box twice, allowing you pick two dates and time. The first box allows you to pick the beginnig date and time and second one lets you pick end date and time

Options

Each type has its' own options.

"DatePicker" and "DateTimePicker":

NametypeDescription
placeholderstringPlaceholder of the datepicker input
formatstringFormat of showing date in the input and styled output. Accepts moment-jalali formats (required)
onChangefunctionOn change call of the input (required)
idstringAdds id attribute to the input elment
preSelectedstringPreviously selected date, it should be formatted exactly the same as the format option
customClassstringTo add "className" to the datepicker
inputTextAlignstringText align of the date input. default "right"
containerClassstringTo add "className" to the datepicker input container
monthTitleEnablebooleanTo add a title before month controller row
inputComponentJSX elementTo add customized input field to your datepicker
cancelOnBackgroundClickbooleanTo add background, which closes the datepicker on click event. It's customizable with class name "JDBackground"
controlValuebooleanBy setting to true, It will make preselected value control the input value
newThemeColorstringSet the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself

DateRangePicker:

NametypeDescription
placeholderStart, placeholderEndstringPlaceholder of the datepickers inputs
formatstringFormat of showing date in the input. Applies on both inputs. Accepts moment-jalali formats (required)
onChangeStart, onChangeEndfunctionOn change call of inputs (required)
idStart, idEndstringAdd id attributes to the input elments
customClassStart, customClassEndstringTo add class name to start and end dattepickers
inputTextAlignstringText align of the date input. default "right"
containerClassstringTo add "className" to the datepicker input container
monthTitleEnablebooleanto add a title before month controller row
inputComponentJSX elementTo add customized input field to your datepicker
preSelectedStartstringPreviously selected date, it should be formatted exactly the same as the format option
cancelOnBackgroundClickbooleanTo add background, which closes the datepicker on click event. It's customizable with class name "JDBackground"
controlValuebooleanBy setting to true, It will make preselected value control the input value
renderPointerbooleanShows the pointer to the end of range, if enabled. default: true
pointerJSX elementRenders the passed pointer element instead of the default one
newThemeColorstringSet the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself

Current date

You can use current-date class to style today. In the calendar you can find today has additional class of current-date.

Outside control sample

here you can find an example of code to control input from your parent component. This example shows how to reset values by a button.

Highlight specific date

Add format of the date. Add preSelected date with the mentioned format. The day will get "selected" class. Today is containing "current-date" class name.

More

More features will be provided.

I'll be glad to help if you faced any issue. Please, report issues here.

License

MIT