typepicker v6.1.6

TypePicker

A date picker use in web and react-native

INSTALL

	npm install typepicker
	or
	yarn add typepicker

OPTIONS

API

	apply.select(date:Date)=>void

	apply.date(date:Date)=>void

	apply.dates(dates:Date[])=>void

	apply.update()=>void;

	apply.disableDate((date:Date)=>boolean)

	listen(({type,types,payload})=>void)

EXAMPLE

Full Example

	//if you are using typescript
	import TypePicker from "./src/index.ts";

	const config = {
		size:1,
		selection:1
	}

	interface TypePickerDate {
	  date: Date;
	  invalid: boolean;
	  disabled: boolean;
	  status?: {
	    isActive?: boolean;
	    isStart?: boolean;
	    isEnd?: Boolean;
	    inRange?: Boolean;
	  };
	}


	const typepicker= new TypePicker(config);

	const onSelectDate =(date:Date[])=>{

		// to disaplay selected values
	}
	const onDataUpdate =(data:[])=>{

			const renderData =data.map(item=>{
						return  {
							year: <number>item.year
							month: <number> item.month,
							dates: <TypePickerDate>item.dates						}
			})
		//here goes how your datepicker ui render
		//example
		//document.getElementById('picker') .innerHTML=template(renderData)



	}

	//setup listeners of select date and data update;
	typepicker.listen(({type,payload})=>[
				if(type==='select'){onSelectDate(payload)}
				if(type==='update'){onDataUpdate(payload)}
	})


	// jump to some date
	// typically use in switching ui display

	typePicker.apply.date(new Date(2019,7,1))

	//set initial dates , its length should euqal to `config.selection`,
	//do not care about the order, we sort them inside picker
	typepicker.apply.dates([someDateObject1,...res])

	//set disabled date
	typepicker.apply.disableDate(date=>{
			return date.getDate() ===31 || date.getDay()===4 //...more conditions
	})

	//call TypePicker update method to trigger rerender
	typepicker.apply.update()

	//select some date from picker data
	//it will trigger `typepicker.listen`
	typepicker.apply.select(someDateObject)