gah-datepicker v4.0.5

gah-datepicker(react js)

#datepicker #rangepicker #monthpicker #hourpicker #multidatepicker

install

npm i gah-datepicker

calendarType='gregorian'	calendarType='jalali'

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

type='range'	type='multiselect'

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');

main props

other props

css styling

• styling datepicker by css based on elements classes.

.gah-cell{
  color:#333;
  background:lightseagreen
}
.gah-cell.gah-disabled{
  background: midnightblue; 
}
.gah-cell.gah-active{
  background:yellow;
  color:#333;
}
.gah-today{
  background:red;
  color:#fff;
}
.gah-header{
  background:steelblue;
  color:orange;
  stroke:orange;
}
.gah-body{
  background: chartreuse;
}
.gah-footer{
  color:#666;
  background:lightcoral
}

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={(dateObject)=>{
          this.setState({date:dateObject.dateString})
        }}
      />
    )
  }
}

• onChange props get dateObject as parameter. see dateObject 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={(dateObject)=>{
          this.setState({date:dateObject.dateString})
        }}
      />
    )
  }
}

• dateObject structure in jalali mode:

{
    "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

• for multiselect mode set type = '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
        type='multiselect'
        values={dates}
        onChange={(values)=>this.setState({dates:values})} 
      />
    )
  }
}

range

• for range mode set type = 'range'

• 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 
        type='range'
        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

<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'}
    }
  }}
  ...
/>