Calendar Component and Convenient Date Picker | tui.date picker

TOAST UI DatePicker applies Google Analytics (GA) to collect statistics on open source usage, in order to determine the extent to which TOAST UI Date Picker is used worldwide.

daterangepicker show calendar by default, datepicker separate date month year, month calendar jquery, date picker with year, jquery datetimepicker date range example

How to make use of it:

1. Install and download 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 embed the compiled and minified version of the tui.date-picker component directly on the webpage.

<!-- Vanilla JS Version (4.x) -->
<link href="/path/to/tui-date-picker.css" rel="stylesheet">
<script src="/path/to/tui-date-picker.js"></script>

<!-- jQuery Version (3.x) -->
<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 the 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>

6. Create an embedded calendar using the createCalendar API.

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

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

      // TUI TimePicker options
      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,

      // start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))
      weekStartDay: 'Sun'

});

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,

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

10. Possible options for the DateRangePicker API.

var picker = tui.DatePicker.createRangePicker({

    // language
    language: 'en',

    // start date
    startpicker: {
      input: '#start-input',
      date: null,
      container: '#start-container',
      weekStartDay: 'Sun',
    },

    // end date
    endpicker: {
      input: '#end-input',
      date: null,
      container: '#end-container',
      weekStartDay: 'Sun',
    },

    // calendar options (see above)
    calendar: {},

    // TUI Timepicker options
    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

});

11. Add your own languages.

DatePicker.localeTexts['myLang'] = {
  titles: {
    // days
    DD: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    // daysShort
    D: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    // months
    MMMM: [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ],
    // monthsShort
    MMM: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  titleFormat: 'MMM yyyy',
  todayFormat: 'D, MMMM dd, yyyy',
  date: 'Date',
  time: 'Time'
};

const datepicker = new DatePicker('#datepicker-container', {
  language: 'myLang'
});

12. API methods.

/* Datepicker Methods */

// Add CSS class
myDatepicker.addCssClass(className);

// Add an opener (trigger element)
myDatepicker.addOpener(opener);

// Add a selectable range
myDatepicker.addRange(start, end);

// Change language
myDatepicker.changeLanguage(language);

// Open the date picker
myDatepicker.open();

// Close
myDatepicker.close();

// Enable
myDatepicker.enable();

// Disable
myDatepicker.disable();

// Toggle the date picker
myDatepicker.toggle();

// Destroy
myDatepicker.destroy();

// year -> month -> dat
myDatepicker.drawLowerCalendar(date);

// date -> month -> year
myDatepicker.drawUpperCalendar(date);

// Return the first overlapped range from the point or range
myDatepicker.findOverlappedRange(startDate, endDate);

// Return the calendar instance.
myDatepicker.getCalendar();

// Return the current calendar type
myDatepicker.getCalendarType();

// Return the selected date
myDatepicker.getDate();

// Return the date elements on the calendar
myDatepicker.getDateElements();

// Return the locale text object
myDatepicker.getLocaleText();

// Return the time picker instance
myDatepicker.getTimePicker();

// Return the date picker's type
// 'date''month''year'
myDatepicker.getType();

// Check whether the date picker is disabled
myDatepicker.isDisabled();

// Check whether the date picker is opened
myDatepicker.isOpened();

// Check whether the date picker is selectable
myDatepicker.isSelectable(date);

// Check whether the date is selected
myDatepicker.isSelected(date);

// Remove all openers
myDatepicker.removeAllOpeners();

// Remove a CSS class from the date picker
myDatepicker.removeCssClass(className);

// Remove an opener
myDatepicker.removeOpener(opener);

// Remove a range. Use Date instances or numbers(timestamp).
myDatepicker.removeRange(start, end, type);

// Select a date
myDatepicker.setDate(date);

// Set date format
myDatepicker.setDateFormat(format);

// Set the input element
myDatepicker.setInput(element, options);

// Set no date to be selected
myDatepicker.setNull();

// Set selectable ranges
myDatepicker.setRanges(ranges);

// Set the calendar's type
myDatepicker.setType(type);

/* Calendar Methods */

// Add CSS class
myCalendar.addCssClass(className);

// Change language
myCalendar.changeLanguage(language);

// Hide the calendar
myCalendar.hide();

// Destroy
myCalendar.destroy();

// Draw the calendar
myCalendar.draw(options);

// Draw the next page.
myCalendar.drawNext();

// Draw the prev page.
myCalendar.drawPrev();

// Return the rendered date.
myCalendar.getDate();

// Return the date elements on the calendar
myCalendar.getDateElements();

// Return the date picker's type
// 'date''month''year'
myCalendar.getType();

// Return the next date
myCalendar.getNextDate();

// Get the date one year later
myCalendar.getNextYearDate();

// Return the previous date
myCalendar.getPrevDate();

// Get the date one year ago
myCalendar.getPrevYearDate();

/* Date Range Picker Methods */

// Add a selectable range
myRangePicker.addRange(start, end);

// Change language
myRangePicker.changeLanguage(language);

// Destroy
myRangePicker.destroy();

// Return the end date
myRangePicker.getEndDate();

// Return the end-datepicker
myRangePicker.getEndpicker();

// Return the start date
myRangePicker.getStartDate();

// Return the start-datepicker
myRangePicker.getStartpicker();

// Remove a range. 
myRangePicker.removeRange(start, end, type);

13. Events.

/* Datepicker Events */

myDatepicker.on('change', () => {
  // do something
});

myDatepicker.on('close', () => {
  // do something
});

myDatepicker.on('draw', (e) => {
  // e.date
  // e.type
  // e.dateElements
});

myDatepicker.on('open', () => {
  // do something
});

/* Calendar Events */

myCalendar.on('draw', (e) => {
  // e.date
  // e.type
  // e.dateElements
});

/* Date Range Picker Events */

myCalendar.on('change:end', () => {
  // do something
});

myCalendar.on('change:start', () => {
  // do something
});

Convenient Calendar & Date Picker Component, TOAST UI Component Date Picker Plugin/Github, select date range in jquery datepicker, versatile datepicker


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.

Share