@persian-tools/persian-mobile-datepicker

Persian Mobile Date and Time picker

This library provides a component that can set year, month, day, hour, minute and second by sliding up or down.

• Note: There is no need to use the moment-jalaali or any other Jalali libraries and every function you need has been documented and if you need a function that we don't have, let us know to implement it.

Demo

All functionalities and demos have documented here: Demo

Theme

Light theme

Dark theme

Getting Started

Install

Using npm:

$ npm install --save @persian-tools/persian-mobile-datepicker

Using yarn:

$ yarn add --save @persian-tools/persian-mobile-datepicker

Import what you need

The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.

import {
  Picker,
  DateConfigValuesModel,
  DateConfigTypes,
} from '@persian-tools/persian-mobile-datepicker';

const config: Partial<Record<DateConfigTypes, DateConfigValuesModel>> = {
  year: {
    caption: {
      text: 'سال',
    },
  },
  month: {
    caption: {
      text: 'ماه',
    },
  },
  day: {
    caption: {
      text: 'روز',
    },
  },
};

const App = () => {
  return <Picker
    config={config}
    minDate={sub(new Date(), { years: 2 })}
    maxDate={new Date()}
    onSubmit={handleSubmit}
    isOpen={showPicker}
    highlightWeekends
    />
  }

PropTypes

Property	Type	Description
config	DatePickerConfig	configuration of datepicker
classNamePrefix	string	className of the datepicker
initialValue	Date	initial date of datepicker
value	WheelPickerSelectEvent	value of datepicker
title	string	title of datepicker
onChange	(selected: WheelPickerSelectEvent) => void	Gets called when value of the picker changes
minDate	Date	Specifies the minimum selectable day by user
maxDate	Date	Specifies the maximum selectable day by user
endYear	number	The Minimum selectable year(Picker will calculate the StartYear by this approach: currentYear + startYear)
startYear	number	The Maximum selectable year(Picker will calculate the StartYear by this approach: currentYear + startYear)
highlightWeekends	boolean	Determines whether to mark weekend days with red or not. (weekend day is Friday)
highlightHolidays	boolean	Determines whether to mark holidays in day column.

Custom date unit

set config to configure year, month, day.

config = {
  year: {
    caption: {
      text: 'سال',
    },
  },
  month: {
    caption: {
      text: 'ماه',
    },
  },
  day: {
    caption: {
      text: 'روز',
    },
  },
};

datePickerConfig

[key in DateConfigTypes]: DateConfigValuesModel

where the DateConfigTypes is one of "year", "month", "day", "hour", "minute", "second"

DateConfigValuesModel

Property	Type	Description
caption	Object	and object with the props text string and style regular react style object
formatter	Function	a function of PickerExtraDateInfo to format the date
classname	Function	a function of PickerExtraDateInfo for specifiying the classNames
shouldRender	Function	a function of PickerExtraDateInfo to specify which functionalities should render
columnStyle	CSSProperties	the inline style of columns of datepicker
itemStyle	CSSProperties	the inline style of each of cell items
selectedItemStyle	CSSProperties	the inline style of selected cell item

WheelPickerSelectEvent

Property	Type	Description
object	PickerDateModel	and object with the props text string and style regular react style object
events	Array	the array of events
date	Date	the value of date

PickerExtraDateInfo

Property	Type	Description
weekDay	number	the number of day of week
weekDayText	string	can have these values: شنبه , یک‌شنبه , دو‌شنبه , سه‌شنبه , چهار‌شنبه , پنج‌شنبه , جمعه or other names if you prefer
monthText	string	is the text of months for e.g. فروردین
dayOfYear	number	number of day in a year
isLeapYear	boolean	whether the year is a leap year or not
isHoliday	boolean	whether the day is a holiday or not
year	number	current year
month	number	current month
day	number	current day
hour	number	current hour
minute	number	current minute
second	number	current second

Usage Examples

Changing the months text

You can do it with the help of formatter props of month in config

{
  year: {
    caption: {
      text: "سال",
    }
  },
  month: {
    caption: {
      text: "ماه",
    },
    formatter: ({ month, monthText }) => (month === 5 ? "امرداد" : monthText),
  },
  day: {
    caption: {
      text: "روز",
    }
  }

Removing a day

If for whatever reason you want to remove some cells you can do so with the use of shouldRender

the following config code will remove the 6th day of 3rd month

{
  year: {
    caption: {
      text: "سال",
    }
  },
  month: {
    caption: {
      text: "ماه",
    }
  },
  day: {
    caption: {
      text: "روز",
    },
    shouldRender: ({ month, day }) => !(month === 3 && day === 6),
  }

Styling columns

If you want to change the inline style of columns or cells of datepicker you can use columnStyle, itemStyle and selectedItemStyle

{
  year: {
    caption: {
      text: "سال",
    },
  },
  month: {
    caption: {
      text: "ماه",
    },
    columnStyle: { background: "#aaa", color: "green" },
    itemStyle: { color: "green" },
    selectedItemStyle: { color: "blue" },
  },
  day: {
    caption: {
      text: "روز",
    },
  }

Date helpers

• newDate: Convert Jalaali Date to Gregorian and returns a Date instance

import { newDate } from '@persian-tools/persian-mobile-datepicker';

newDate({
  year: 1400,
  month: 1,
  day: 0,
}); // Sun Mar 21 2021 00:00:00 GMT+0330 (Iran Standard Time)

• convertDateInstanceToDateObject: Convert entered date to an object

import { convertDateInstanceToDateObject } from '@persian-tools/persian-mobile-datepicker';

convertDateInstanceToDateObject(new Date()); // {year: 1400, month: 5, day: 15, hour: 22, minute: 20,second: 10}

• daysInMonth: Get the number of days in a month of a year

import { daysInMonth } from '@persian-tools/persian-mobile-datepicker';

daysInMonth(1400, 1); // 31

• getWeekDay: Get the day of the week of the given date. Returns number starts from 0, 0 means the first day of Week and 6 means the last day of Week

import { getWeekDay } from '@persian-tools/persian-mobile-datepicker';

getWeekDay(1400, 5, 15); // 6

• getDayOfYear: Get the day of the year of the given date.

import { getDayOfYear } from '@persian-tools/persian-mobile-datepicker';

getDayOfYear(1400, 5, 15); // 139

• isWeekend: Return true if the Date is at the Weekend

import { isWeekend } from '@persian-tools/persian-mobile-datepicker';

isWeekend(1400, 5, 22); // true -> because it is friday
isWeekend(1400, 5, 23); // false -> it is Saturday

• getWeekDayText: Get Name the days of the week

import { getWeekDayText } from '@persian-tools/persian-mobile-datepicker';

getWeekDayText(1400, 5, 22); // جمعه
getWeekDayText(1400, 5, 23); // شنبه

• isValidJalaaliDate: Is the given Jalaali date valid?

import { isValidJalaaliDate } from '@persian-tools/persian-mobile-datepicker';

isValidJalaaliDate(1399, 12, 30); // true -> because 1399 is leap
isValidJalaaliDate(1400, 12, 30); // false

• isBefore: Is the first date before the second one?

import { isBefore, newDate } from '@persian-tools/persian-mobile-datepicker';

const firstDate = newDate(1399, 12, 30);
const secondtDate = newDate(1400, 2, 1);

isBefore(firstDate, secondtDate); // true

• isAfter: Is the first date after the second one?

import { isAfter, newDate } from '@persian-tools/persian-mobile-datepicker';

isAfter(newDate(1361,10,10), newDate(1372,10,10)); // false
isAfter(newDate(1372,10,10), newDate(1361,10,10)); // false

• format: Returns the formatted date string in the given format. The result may vary by locale.

import { format } from '@persian-tools/persian-mobile-datepicker';

format(new Date('2020-10-10'), 'yyyy/MM/dd'); // 1399/07/19

• isEqual: Are the given dates equal?

import { isEqual, newDate } from '@persian-tools/persian-mobile-datepicker';

isEqual(newDate(1361,10,10), newDate(1372,10,10)); // false
isEqual(newDate(1361,10,10), newDate(1361,10,10)); // true

• getCurrentYear: Get the year of the current date.

import { getCurrentYear } from '@persian-tools/persian-mobile-datepicker';

getCurrentYear(); // 1400

• currentDateObject: Converts date instance to an object.

import { currentDateObject } from '@persian-tools/persian-mobile-datepicker';

currentDateObject(); // {day: 16, hour: 5, minute: 51, month: 5, second: 1, year: 1400}

• isLeapYear: Check if the entered year is Leap

import { isLeapYear } from '@persian-tools/persian-mobile-datepicker';

isLeapYear(1399); // true
isLeapYear(1400); // false

Roadmap

• Add hour, minute and seconds
• Implement react native component