https://github.com/Fi2zz/TypePicker

A date picker use in web and react-native
https://github.com/Fi2zz/TypePicker

datepicker react-datepicker typescript vanilla-js vue-datepicker

Last synced: about 2 months ago
JSON representation

A date picker use in web and react-native

• Host: GitHub
• URL: https://github.com/Fi2zz/TypePicker
• Owner: Fi2zz
• License: mit
• Archived: true
• Created: 2017-11-12T05:17:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-14T08:38:25.000Z (about 4 years ago)
• Last Synced: 2024-09-23T19:16:05.312Z (3 months ago)
• Topics: datepicker, react-datepicker, typescript, vanilla-js, vue-datepicker
• Language: TypeScript
• Homepage:
• Size: 1.92 MB
• Stars: 14
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TypePicker

A date picker use in web and react-native

## INSTALL

```bash

	npm install typepicker

	or

	yarn add typepicker

```

## OPTIONS

| OPTION    | REQUIRED | TYPE   | DESC                 | Default |

| --------- | -------- | ------ | -------------------- | ------- |

| size      | NO       | number | Size of data created | 1       |

| selection | NO       | number | Size of data picked  | 1       |

## API

```typescript

	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](./example)

```typescript

	//if you are using typescript

	import TypePicker from "typepicker";

	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: item.year

							month:  item.month,

							dates: 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)

```