nextjs-tui-date-range-picker

nextjs-tui-date-range-picker allows you to pick a date using a pop-up calendar in Next.js.

Document

• Installation
• How to use
• Demos
• Properties
• Example code
• Contribute

Installation

This library use nextjs-tui-date-range-picker, so you need to install it.

1npm install --save nextjs-tui-date-range-picker

or

1yarn add nextjs-tui-date-range-picker

How to use

• TuiDateRangePicker

1'use client';
2
3import {
4  TuiDateRangePicker,
5} from 'nextjs-tui-date-picker';
6
7<TuiDateRangePicker
8    handleChange={handleChange}
9    options={options}
10    inputWidth={80}
11    containerWidth={200}
12    startpickerDate={new Date('2023-01-02')}
13    endpickerDate={new Date('2023-01-30')}
14/>

• If you wanna change format or language

1const options: DateRangePickerOption = {
2  language: 'en',
3  format: 'MM-dd YYYY',
4};
5
6return (
7  <>
8    <TuiDateRangePicker
9      handleChange={handleChange}
10      options={options}
11    />
12  </>
13);

Demos

• nextjs-tui-range-picker.

Properties

Below are nextjs-tui-date-picker specific properties.

Prop	required	Type	Description
handleChange	true	(e) => void	Functions to run when value changes
options	false (but recommended)	DateRangePickerOption	More detail
date	false	Date	Initial date ( not using nextjs-tui-range-picker)
startpickerDate	false	Date	Initial Start date in range-picker (only using in nextjs-tui-range-picker)
endpickerDate	false	Date	Initial date End Date in range-picker (only using in nextjs-tui-range-picker)
inputWidth	false	number	Input width
containerWidth	false	number	Overall component width

Below are options properties of nextjs-tui-date-picker.

options

Prop	required	Type	Description
date	x	Date	Initial date. Set by a Date instance or a number(timestamp). (default: no initial date).
language	x	string = 'en'	DatePicker type. Determine whether to choose a date, month, or year.
timePicker	x	[ object boolean ]	TimePicker options. Refer to the TimePicker instance's options. To create the TimePicker without customization, set to true.
calendar	x	[ object ]	Calendar options. Refer to the Calendar instance's options.
input	x	[ object ]	element : HTMLElement, formant : string = 'yyyy-mm--dd'
selectableRanges	x	Array.<Array.>	Ranges of selectable date. Set by Date instances or numbers(timestamp).
openers	x	Array = []	List of the openers to open the DatePicker (example - icon, button, etc.)
showAlways	x	boolean = true	Show the DatePicker always
autoClose	x	boolean = true	Close the DatePicker after clicking the date.
usageStatistics	x	boolean = true	Send a hostname to Google Analytics (default: true)
weekStartDay	x	string = 'Sun'	Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))

Example code

You can see the example code and demo.

Clone the repository

1git clone https://github.com/in-ch/nextjs-tui-date-picker.git

Install libraries

1cd example/example_nextjs_app_dir

or

1cd example/example_nextjs_page_dir

and

1npm install

Contribute

You can follow below to contribute nextjs-tui-date-range-picker

Clone the repository.

1git clone https://github.com/in-ch/nextjs-tui-date-picker.git