Convenient Calendar & Date Picker Component - jQuery tui.date-picker

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.