Press "Enter" to skip to content

TOAST UI Calendar & Date Picker Component | jQuery tui.date-picker

TOAST UI DatePicker applies Google Analytics (GA) to collect statistics on open source usage, in order to determine the extent of use of the TOAST UI Date Picker worldwide. It also serves as an important indicator for determining the future course of projects.

jquery datepicker, date range picker, jquery datepicker example, datepicker javascript, datepicker html, datepicker options

Features:

  • Calendar Mode: Built-in calendar
  • Data picker mode: time / date / month / year picker
  • Data picker mode: This allows you to select a date range.

How to make use of it:

1. Install & download the tui.date-picker by way of NPM.

# NPM
$ npm install tui-date-picker --save

2. Import the tui.date-picker.

// ES 6
import {DatePicker} from 'tui-date-picker';

3. Or instantly embody the compiled & minified model of the tui.date-picker element 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 element in case you wish to show a time picker contained in 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 area.

<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 utilizing the createCalendar API.

<div id="calendar-example"></div>
var DatePicker = tui.DatePicker;
var myCalendar = DatePicker.createCalendar('#calendar-example');

7. Create a date range picker utilizing 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 choices 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 choices 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,

    // 'Sun', 'Mon', ...
    weekStartDay: 'Mon',
    
});

10. Possible choices 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

});

Convenient Calendar & Date Picker Component, TOAST UI Component : Date Picker Plugin/Github

TOAST UI Component


See Demo And Download

Official Website(nhn): Click Here

This superior jQuery/javascript plugin is developed by nhn. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.