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.

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

or

yarn add nextjs-tui-date-range-picker

How to use

• TuiDateRangePicker

'use client';

import {
  TuiDateRangePicker,
} from 'nextjs-tui-date-picker';

<TuiDateRangePicker
    handleChange={handleChange}
    options={options}
    inputWidth={80}
    containerWidth={200}
    startpickerDate={new Date('2023-01-02')}
    endpickerDate={new Date('2023-01-30')}
/>

• If you wanna change format or language

const options: DateRangePickerOption = {
  language: 'en',
  format: 'MM-dd YYYY',
};

return (
  <>
    <TuiDateRangePicker
      handleChange={handleChange}
      options={options}
    />
  </>
);

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

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

Install libraries

cd example/example_nextjs_app_dir

or

cd example/example_nextjs_page_dir

and

npm install

Contribute

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

Clone the repository.

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