gah-datepicker

gah-datepicker(react js)

install

npm i gah-datepicker

calendarType='gregorian'	calendarType='jalali'

unit='month'	unit='day'	unit='hour'

range={true}	multiselect={true}

justCalendar={true}	swipe={true}

size={180}	size={120}

theme={['orange','#555']}	theme={['#777','lightblue']}

getDateStyle={(obj)=>...}	getDateStyle={(obj)=>...}

editValue={(text)=>'From Date : ' + text}	disabled={true}

default caret	caret={false}	caret={(<div className='mdi mdi-chevron-down'></div>)}

style={{width:'100%',background:'dodgerblue',color:'#fff',borderRadius:6}}	icon={(<svg...>...</svg>)}

• react js
• custom size by set one prop
• custom theme by set one prop
• custom date cell style
• gregorian date
• jalali date ( persian )
• month picker
• day picker
• hour picker
• range picker
• multi select
• simple configuration

Read this document in 5 minutes

use

• ES6:

import GAH from 'gah-datepicker';

• ES5:

var GAH = require('gah-datepicker');

all props

prop	type	default	Description
calendarType	'gregorian' or 'jalali'	'gregorian'	set datepicker type(برای تقویم فارسی کافیست این پروپرتی را روی جلالی تنظیم کنید)
unit	'month' or 'day' or 'hour'	'day'	for select month , set unit as 'month' and for select hour set ubit as 'hour'.
prevYears	number	10	numeber of years that can select before this year.
nextYears	number	20	numeber of years that can select after this year.
value	string or array	false	value of datepicker
onChange	function	Required	change value event. get an object as parameter contain changed value properties.
disabled	boolean	false	make date picker disabled. block actions.
multiselect	boolean	false	enable multiselect mode.
range	boolean	false	enable range mode.
setDisabled	function	optional	will called For each date and get the date object as parameter, must return a boolean to determine whether the date is disabled or not.
getDateStyle	function	optional	will called For each date and get the date object as parameter, must return an css object as style of date.
icon	html or jsx	optional	use icon in datepicker button.
className	'string'	optional	custom className of datepicker.
id	'string'	optional	id of datepicker.
style	css object	optional	css style of datepicker button.
caret	boolean or html or jsx	true (default caret)	set caret icon of datepicker button.
onClear	function	optional	place clear button in bottom of datepicker. user can call onClear function by click on clear button.
size	number	180	set size of datepicker
placeHolder	'string'	'Select Date' in gregorian mode and 'انتخاب تاریخ' in jalali mode	show text on button when value is false or undefined
theme	array of 2 color string	['dodgerblue','#ffffff']	set theme color of datepicker by define 2 color
swipe	boolean	false	change date by swipe mouse vertically.
justCalendar	boolean	false	show just calendar alwais visible without datepicker button.
types	array of objects	optional	use in multiselect mode . make multiselect as multi color
animate	boolean	false	open calendar with animation
open	boolean	false	show calendar in first render.

Basic

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={date:'2020/4/5'};
  render(){
    let {date} = this.state;
    return (
      <GAH
        value={date}
        onChange={(obj)=>{
          this.setState({date:obj.dateString})
        }}
      />
    )
  }
}

• onChange props get obj as parameter. see obj json:

{
    "year": 2020,
    "month": 2,
    "day": 20,
    "weekDay": "THURSDAY",
    "weekDayIndex": 4,
    "monthFirstDayWeekDay": "SATURDAY",
    "year2Digit": "20",
    "month2Digit": "02",
    "day2Digit": "20",
    "weekDays": [
        "SUNDAY",
        "MONDAY",
        "THUESDAY",
        "WEDNESDAY",
        "THURSDAY",
        "FRIDAY",
        "SATURDAY"
    ],
    "monthString": "FEBRUARY",
    "todayMonthString": "DECEMBER",
    "startYear": 2011,
    "endYear": 2041,
    "dateString": "2020/2/20",
    "fullDateString": "2020/2/20 THURSDAY",
    "today": [
        2021,
        12,
        14
    ],
    "todayWeekDay": "THUESDAY",
    "todayWeekDayIndex": 2
}

jalali(تقویم فارسی)

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={date:'1400/2/20'};
  render(){
    let {date} = this.state;
    return (
      <GAH
        calendarType='jalali'
        value={date}
        onChange={(obj)=>{
          this.setState({date:obj.dateString})
        }}
      />
    )
  }
}

• obj:

{
    "year": 1400,
    "month": 2,
    "day": 20,
    "weekDay": "دوشنبه",
    "weekDayIndex": 2,
    "monthFirstDayWeekDay": "چهارشنبه",
    "year2Digit": "00",
    "month2Digit": "02",
    "day2Digit": "20",
    "weekDays": [
        "شنبه",
        "یکشنبه",
        "دوشنبه",
        "سه شنبه",
        "چهارشنبه",
        "پنجشنبه",
        "جمعه"
    ],
    "monthString": "اردیبهشت",
    "todayMonthString": "آذر",
    "startYear": 1390,
    "endYear": 1420,
    "dateString": "1400/2/20",
    "fullDateString": "1400/2/20 دوشنبه",
    "today": [
        1400,
        9,
        23
    ],
    "todayWeekDay": "سه شنبه",
    "todayWeekDayIndex": 3,
    "gregorian": [
        2021,
        5,
        10
    ],
    "todayGregorian": [
        2021,
        12,
        14
    ],
    "weekDayGregorian": "MONDAY",
    "monthStringGregorian": "FEBRUARY"
}

unit

• month picker:

<GAH
  ...
  unit='month'
  value='2021/12'
  ...
/>

• hour picker:

<GAH
  ...
  unit='hour'
  value='2021/12/18/10'
  ...
/>

use any splitter (each not an number character)

• in this example splitter is "."

• you can set any isNaN character for splitting date.

<GAH
  ...
  value='2020.2.20'
  ...
/>

multiselect

• simple multiselect:

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={
    dates:[
      '2021/12/1',
      '2021/12/2',
      '2021/12/6',
      '2021/12/20'
    ]
  };
  render(){ 
    let {dates} = this.state; 
    return (
      <GAH
        multiselect={true}
        values={dates}
        onChange={(values)=>this.setState({dates:values})} 
      />
    )
  }
}

range

• for range mode set range = true

• range mode get start and end props and will render 2 datepicker

• start and end can get most main props

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={
    startDate:'2020/3/4',
    endDate:'2020/3/7'
  };
  render(){  
    let {startDate,endDate} = this.state; 
    return (
      <GAH 
        range={true}
        start={{
          value:startDate,
          onChange:({dateString})=>{
            this.setState({startDate:dateString})
          }
          //other props....
        }}
        end={{
          value:endDate,
          onChange:({dateString})=>{
            this.setState({endDate:dateString})
          }
          //other props....
        }}
        
      />
    )
  }
}

without value

• if value equal false or undefined , the placeHolder string will be displayed.

<GAH
  ...
  value={false}
  ...
/>

placeHolder

<GAH
  value={false}
  placeHolder='Select Any Date'
/>

icon

• use any html or jsx in datepicker button as icon.

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={date:'2020.2.20'};
  render(){
    let {date} = this.state;
    let svg = (
      <svg x="0px" y="0px" viewBox="0 0 216.374 216.374" style={{width:20,height:20,marginRight:6}} fill='#666'>
        <path d="M207.374,30.135h-25.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9v16.703H52.438V13.432c0-4.971-4.029-9-9-9s-9,4.029-9,9
          v16.703H9c-4.971,0-9,4.029-9,9v163.808c0,4.971,4.029,9,9,9h198.374c4.971,0,9-4.029,9-9V39.135
          C216.374,34.164,212.345,30.135,207.374,30.135z M198.374,48.135v19.997H18V48.135H198.374z M18,193.942V86.132h180.374v107.811H18
          z"/>
        <path d="M140.288,102.718L89.82,153.186l-13.734-13.734c-3.515-3.514-9.213-3.514-12.728,0c-3.515,3.515-3.514,9.214,0,12.729
          l20.098,20.098c1.757,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l56.832-56.831c3.515-3.515,3.515-9.214,0-12.729
          C149.502,99.205,143.803,99.204,140.288,102.718z"/>
      </svg>
    )
    return (
      <GAH
        value={date}
        icon={svg}
      />
    )
  }
}

caret

• without caret

<GAH
  ...
  caret={false}
  ...
/>

• custom caret

<GAH
  ...
  caret={<div className='mdi mdi-chevron-down'></div>}
  ...
/>

prevYears , nextYears

prop	type	default	description
prevYear	number	10	years count before this year
nextYear	number	20	years count after this year

<GAH
  ...
  prevYears={5}
  nextYears={10}
  ...
/>

onClear

• onClear function will be called after user click on clear button.

import React,{Component} from "react";
import GAH from 'gah-datepicker';
export default class App extends Component{
  state={date:'2020/2/20'};
  render(){
    let {date} = this.state;
    return (
      <GAH
        value={date}
        onChange={(obj)=>{this.setState({date:obj.dateString})}}
        onClear={()=>this.setState({date:false})}
      />
    )
  }
}

style

• css style for datepicker button.

<GAH
  style={{width:'100%',background:'dodgerblue',color:'#fff',borderRadius:6}}
/>

size

• for set custom size of datepicker just set size props.

<GAH
  size={120}
/>

setDisabled

• make dates disabled

• in this example, '2020/1/1' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    obj.isEqual('2020/1/1')
  }}
  ...
/>

• also in this example, '2020/1/1' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.year === 2020 && obj.month === 1 && obj.day === 1
  }}
  ...
/>

• also in this example, '2020/1/1' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.dateString === '2020/1/1'
  }}
  ...
/>

• in this example all dates before '2020/2/20' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.isLess('2020/2/20')
  }}
  ...
/>

• in this example all dates after '2020/2/20' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.isGreater('2020/2/20')
  }}
  ...
/>

• in this example all dates between '2020/2/10' and '2020/2/20' will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.isBetween('2020/2/10','2020/2/20')
  }}
  ...
/>

• in this example all fridays will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.weekDay === 'friday'
    // or return obj.weekDayIndex === 5
  }}
  ...
/>

• in this example all fridays in 2020 year will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.year === 2020 && obj.weekDay === 'friday'
  }}
  ...
/>

• in this example fridays in 2020/6 will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.year === 2020 && obj.month === 6 && obj.weekDay === 'friday'
  }}
  ...
/>

• in this example all fridays in all years in june will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.month === 6 && obj.weekDay === 'friday'
  }}
  ...
/>

• in this example all days in 2020/6 will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.isEqual('2020/6')
  }}
  ...
/>

• in this example all days in 2020 will be disabled.

<GAH
  ...
  setDisabled={(obj)=>{
    return obj.isEqual('2020')
  }}
  ...
/>

theme

<GAH
  ...
  theme={['#777','lightblue']}
  ...
/>

<GAH
  ...
  theme={['orange','#fff']}
  ...
/>

<GAH
  ...
  theme={['orange','#555']}
  ...
/>

getDateStyle

<GAH
  ...
  getDateStyle={(obj)=>{
    if(obj.weekDayIndex === 3){
      return {background:'#2dc0c5',color:'#fff'}
    }
    if(obj.weekDayIndex === 4){
      return {background:'#9be4e7',color:'#fff'}
    }
    if(obj.weekDayIndex === 5){
      return {background:'#6fd7c8',color:'#fff'}
    }
    if(obj.weekDayIndex === 6){
      return {background:'#56f997',color:'#fff'}
    }
  }}
  ...
/>

<GAH
  ...
  getDateStyle={(obj)=>{
    if(obj.isBetween('2021/4/15','2021/4/28')){
      return {background:'orange',color:'#fff'}
    }
  }}
  ...
/>