Skip to main content

React AD BS Date picker

Available Variants as of now:

1. Calendar -> Renders Calendar Layout (The basic building block);2. DatePicker -> Input field with Calendar on popup3. RangePicker -> Two Calendar Layout side by side for range selection4. DefinedRangeSelector -> TODO5. //TODO

Data passed/entered (Value) -Input#

The Calendar component can be both controlled and uncontrolled. If value is passed, defaultValue is ignored.

  • value : string (formatted according to dateFormat)
  • defaultValue: string (formatted according to dateFormat)

Calendar Configuration#

  • calendarType - "AD"| "BS" default= //TODO

Though all inner operations are done in AD format, this configuration differentiates the rendering date value. If AD is passed then AD calendar is rendered and if BS is passed then BS calendar is rendered.

Based on this props, the input and ouput values also differ.


Data Selection/Change - Output#

For calendarLayout onSelect (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date)=>void;

  1. The formattedDate will be string formatted according to the dateFormat provided and calendarType. If calendarType is BS then the output will be tha formatted string of BS Date and if it is AD then the output will the formatted string of AD Date.
  2. The adDate //TODO for now object with property date,year,month is sent
  3. The bsDate //TODO for now object with property date,year, month is sent

onChange (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date)=>void;

All the arguments are same for both onSelect and onChange. onSelect is available in Calendar while onChange is avaliale in DatePicker

Formatting#

dateFormat: string combination of y,m and d

default: "" //TODO

y - Year, m - Month, d- Day

Acceptable format are the permutation of "yyyy", "mm","m","d","dd" Internally the date format is lowercased so any case is acceptable. All the date received from the library will eventually be formatted according to this props.

Also make sure to send all the dates defaultValue,maxDate,minDate, value to be in the format passed in dateFormat props

Disable Configuration#

  1. maxDate:string#

The maximum Date allowed. Beyond this date, everything is disabled. Make sure to pass the date formatted according to the dateFormat Props


  1. minDate:string#

The minimum Date allowed. All Dates before the date are disabled. Make sure to pass the date formatted according to the dateFormat props


  1. disablePast:boolean#

Disables all the dates before today's date;


  1. disableFuture:boolean#

Disables all the dates after today's date;


  1. disableDate: (formattedDate: string,adDate: DateType,bsDate: DateType, dateString:Date) => boolean;#

Use your own custom function to disable The date. All the arguments received on the callback are same as that of onSelect props

DropDown#

  1. showMonthDropdown : boolean | "full" | "short" | "min"#

    default = false

    passing full, short and min is still not supported

  2. showYearDropdown : boolean | [min:number , max:number]#

    default = false

    passing min and max array is sitll not supported

Range#

//TODO

DefinedRangeSelector#

has some predefined ranges set by passing props.

// TODO support plain array like [-15,-30,-7,-25]

definedRanges : [{ label:string,offset:number|IDateoffset }]

basedate : string

This prop contains the predefined ranges that allows the selection of ranges

  • label => (unique) This label is used as key in the list and so is supposed to be unique. The label will the the description rendered on the screen
  • offset => offset can be either the object of shape {date, month, year} or a single number. if a single number is provided then it is assumed as date offset. The offset will be used to calculate the selection range based on baseDate provided.

baseDate => The base by which the range selection is calcuated using the offset on definedRanges. default => Today. baseDate is supposed to be string formatted according to the dateFormat provided.

for example:


const definedRanges = [ {   label: "Last Year",   offset: { year: -1 }, }, {   label: "Last 15 days",   offset: -15, }, {   label: "Last 7 days",   offset: -7, }, {   label: "Last 25 days",   offset: -25, }, {   label: "Last 30 days",   offset: -30, }, {   label: "Last 45 days",   offset: -45, }, {   label: "Next week",   offset: 7, },];const baseDate = "2020-10-12";
/// Rendered outputLast Year       2019-10-12 - 2020-10-12Last 15 days    2020-09-27 - 2020-10-12Last 7 days     2020-10-05 - 2020-10-12Last 25 days    2020-09-17 - 2020-10-12Last 30 days    2020-09-12 - 2020-10-12Last 45 days    2020-08-28 - 2020-10-12Next week       2020-10-12 - 2020-10-19///

Terms:#

-parse => Convert date string to date object using the date format for example: "2020-10-12" => {year: 2020, month:10, date:12} given format ("YYYY-MM-DD"); -format => Opposite of parse. Converts date object to date string. for example: {year: 2020, month:10, date:12}=>"2020-10-12" => given format ("YYYY-MM-DD");