
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.
# NPM $ npm install tui-date-picker --save
2. Import the tui.date-picker.
// ES 6 import {DatePicker} from 'tui-date-picker';
3. Or directly include the compiled & minified version of the the tui.date-picker component on the webpage.
<link href="/path/to/tui-date-picker.css" rel="stylesheet"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/tui-code-snippet.min.js"></script> <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.
<link href="/path/to/tui-time-picker.css" rel="stylesheet"> <script src="/path/to/tui-time-picker.js"></script>
5. Append the date picker to an input field.
<div class="tui-datepicker-input tui-datetime-input tui-has-focus"> <input type="text" id="datepicker-input" aria-label="Date-Time"> <span class="tui-ico-date"></span> </div> <div id="example"></div>
const myDatepicker = new tui.DatePicker('#example', { date: new Date(), input: { element: '#datepicker-input' } });
6. Create an inline calendar using the createCalendar
API.
<div id="calendar-example"></div>
var DatePicker = tui.DatePicker; var myCalendar = DatePicker.createCalendar('#calendar-example');
7. Create a date range picker using the createRangePicker
API.
<div class="tui-datepicker-input tui-datetime-input tui-has-focus"> <input id="startpicker-input" type="text" aria-label="Date"> <span class="tui-ico-date"></span> <div id="startpicker-container"></div> </div> <span>to</span> <div class="tui-datepicker-input tui-datetime-input tui-has-focus"> <input id="endpicker-input" type="text" aria-label="Date"> <span class="tui-ico-date"></span> <div id="endpicker-container"></div> </div>
var today = new Date(); var picker = tui.DatePicker.createRangePicker({ startpicker: { date: today, input: '#startpicker-input', container: '#startpicker-container' }, endpicker: { date: today, input: '#endpicker-input', container: '#endpicker-container' }, selectableRanges: [ [today, new Date(today.getFullYear() + 1, today.getMonth(), today.getDate())] ] });
8. Possible options for the DatePicker
API.
// options and defaults const myDatepicker = new tui.DatePicker('#example', { // language language: 'en' // calendar options (see below) calendar: {}, // element: input element // format: date format input: { element: null, format: null }, // enable/disable timepicker timepicker: null, // initial date date: null, // always show the date picker showAlways: false, // 'date', 'month', 'year' type: 'date', // selectable date ranges selectableRanges: null, // opener button list openers: [], // auto close after selection autoClose: true, // send hostname to google analytics usageStatistics: true });
9. Possible options for the Calendar
API.
var myCalendar = DatePicker.createCalendar('#calendar-example',{ // language language: 'en', // show today showToday: true, // show jump buttons showJumpButtons: false, // initial date date: new Date(), // 'date', 'month', 'year' type: 'date', // send hostname to google analytics usageStatistics: true });
10. Possible options for the DateRangePicker
API.
var picker = tui.DatePicker.createRangePicker({ // language language: 'en', // start date startpicker: { input: '#start-input', container: '#start-container' }, // end date endpicker: { input: '#end-input', container: '#end-container' }, // calendar options (see below) calendar: {}, // enable/disable timepicker timepicker: null, // 'date' | 'month' | 'year' type: 'date', // date format format: 'yyyy-MM-dd' // selectable date ranges selectableRanges: [ [new Date(2017, 3, 1), new Date(2017, 5, 1)], [new Date(2017, 6, 3), new Date(2017, 10, 5)] ], // always show the date picker showAlways: false, // auto close after selection autoClose: true, // send hostname to google analytics usageStatistics: true });
This awesome jQuery plugin is developed by nhnent. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 28.07.2018
- Source