This time I will share jQuery Plugin and tutorial about Convenient Calendar & Date Picker Component – jQuery tui.date-picker, hope it will help you in programming stack.
tui.date-picker is an easy-to-use, user-friendly, multi-language, highly customizable calendar, time/date/month/year picker and date range picker component implemented in jQuery.
Features:
- Calendar mode: inline calendar
- Datepicker mode: time/date/month/year picker
- DaterangePicker mode: allows you to select a date range.
How to use it:
1. Install & download the tui.date-picker via NPM.
2 |
$ npm install tui-date-picker --save |
2. Import the tui.date-picker.
2 |
import {DatePicker} from 'tui-date-picker' ; |
3. Or directly include the compiled & minified version of the the tui.date-picker component on the webpage.
1 |
< link href = "/path/to/tui-date-picker.css" rel = "stylesheet" > |
2 |
< script src = "/path/to/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/tui-code-snippet.min.js" ></ script > |
4 |
< script src = "/path/to/tui-date-picker.js" ></ script > |
4. Include the tui.time-picker component in case you want to display a time picker inside the date picker.
1 |
< link href = "/path/to/tui-time-picker.css" rel = "stylesheet" > |
2 |
< script src = "/path/to/tui-time-picker.js" ></ script > |
5. Append the date picker to an input field.
1 |
< div class = "tui-datepicker-input tui-datetime-input tui-has-focus" > |
2 |
< input type = "text" id = "datepicker-input" aria-label = "Date-Time" > |
3 |
< span class = "tui-ico-date" ></ span > |
5 |
< div id = "example" ></ div > |
1 |
const myDatepicker = new tui.DatePicker( '#example' , { |
4 |
element: '#datepicker-input' |
6. Create an inline calendar using the createCalendar
API.
1 |
< div id = "calendar-example" ></ div > |
1 |
var DatePicker = tui.DatePicker; |
2 |
var myCalendar = DatePicker.createCalendar( '#calendar-example' ); |
7. Create a date range picker using the createRangePicker
API.
01 |
< div class = "tui-datepicker-input tui-datetime-input tui-has-focus" > |
02 |
< input id = "startpicker-input" type = "text" aria-label = "Date" > |
03 |
< span class = "tui-ico-date" ></ span > |
04 |
< div id = "startpicker-container" ></ div > |
09 |
< div class = "tui-datepicker-input tui-datetime-input tui-has-focus" > |
10 |
< input id = "endpicker-input" type = "text" aria-label = "Date" > |
11 |
< span class = "tui-ico-date" ></ span > |
12 |
< div id = "endpicker-container" ></ div > |
01 |
var today = new Date(); |
02 |
var picker = tui.DatePicker.createRangePicker({ |
05 |
input: '#startpicker-input' , |
06 |
container: '#startpicker-container' |
10 |
input: '#endpicker-input' , |
11 |
container: '#endpicker-container' |
14 |
[today, new Date(today.getFullYear() + 1, today.getMonth(), today.getDate())] |
8. Possible options for the DatePicker
API.
02 |
const myDatepicker = new tui.DatePicker( '#example' , { |
30 |
selectableRanges: null , |