Gathering detailed insights and metrics for nextjs-tui-date-range-picker
A tui date picker control built with and for Next.js
Installations
npm install nextjs-tui-date-range-pickerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.9.0
NPM Version
10.5.0
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (97.57%)
JavaScript (2.43%)
Developer
Download Statistics
Total Downloads
2,895
Last Day
6
Last Week
26
Last Month
226
Last Year
1,971
GitHub Statistics
6 Stars
102 Commits
2 Forks
1 Watching
1 Branches
2 Contributors
Bundle Size
4.84 kB
Minified
1.77 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.1.1
Package Id
nextjs-tui-date-range-picker@2.1.1
Unpacked Size
123.46 kB
Size
19.71 kB
File Count
17
NPM Version
10.5.0
Node Version
20.9.0
Publised On
22 Mar 2024
Total Downloads
Cumulative downloads
Total Downloads
2,895
Last day
0%
6
Compared to previous day
Last week
18.2%
26
Compared to previous week
Last month
182.5%
226
Compared to previous month
Last year
113.3%
1,971
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
10
Dev Dependencies
4
Versions
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
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
No vulnerabilities found.
No security vulnerabilities found.