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, |
