Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (118 sloc) 4.01 KB

v4.0.0 Migration Guide

In v4.0.0, jQuery is removed. It might cause other components to fail if they pass a jQuery object as a container.

Previously, you can use a jQuery to create an instance.

// v3
var instance = new tui.DatePicker($('#datepicker-wrapper'), {
   // options
});

Now, you have to use selector or HTMLElement as a container.

// v4
var instance = new tui.DatePicker('#datepicker-wrapper', {
   // options
});

// or

var container = document.getElementById('datepicker-wrapper');
var instance = new tui.DatePicker(container, {
    // options
});

Load dependency files

  • Script - tui-code-snippet 1.5.0 or later
  • Script - tui-dom 3.0.0 or later

    If your project should support IE8, please use tui-dom.js, not tui-dom.min.js.

  • Script - tui-time-picker 2.0.0 or later
<html>
    <head>
        ....
        <link href="tui-date-picker.css" rel="stylesheet">
    </head>
    <body>
        ....
        <script type="text/javascript" src="tui-code-snippet.js"></script>
        <script type="text/javascript" src="tui-dom.min.js"></script>
        <script type="text/javascript" src="tui-date-picker.js"></script>
        ....
    </body>
</html>

Write a wrapper element

<div id="datepicker-wrapper"></div>

Create instance

var instance = new tui.DatePicker('#datepicker-wrapper', {
   // options
});

Options

Datepicker

  • language (default 'en')
    • There are two supporting types by default - 'en' and 'ko'.
    • For custom texts - See the Datepicker.localeTexts
    • If set both calendar-language and datepicker-language, will apply datepicker-language first.
  • showAlways (default false)
    • If true, the datepicker will not close until you call "close()".
  • autoClose (default true)
    • If true, Close datepicker when select date
  • date (nullable)
    • Date instance or Timestamp for initial date
  • input
    • Set to bind input element
    • ex) {input: '#datepicker-input', format: 'yyyy-MM-dd'}
    • See the Date-Time text format
  • type (default 'date')
    • Type of picker - 'date', 'month', year'
    • See examples in API page
  • selectableRanges
    • Set selectable dates of datepicker
    • 2d-Array: [[startDate1, endDate1], [startDate2, endDate2], ...]
  • openers
    • Bind buttons to auto toggle(open-close) datepicker
    • Array of elements: ex) ['#opener1', '#opener2', ..]
  • calendar
  • timepicker

Calendar

  • language (default 'en')
    • There are two supporting types by default - 'en' and 'ko'.
    • For custom texts - See the Calendar.localeTexts
  • showToday (default true)
    • If true, calendar shows today
  • showJumpButtons
    • If true, 'date'-type calendar shows jump buttons (prev-year, next-year)
  • date
    • Date instance for initial date
  • type
    • Type of calendar - 'date', 'month', 'year'

Timepicker

  • initialHour (default 0)
  • initialMinute (default 0)
  • showMeridiem (default true)
    • If true, shows 'AM'/'PM' selector.
  • inputType (defalult selectbox)
    • Input types 'selectbox' or 'spinbox'

Date-Time text format

Format Desc Example
yyyy / YYYY Year 2016, 2017, 2018, ...
y / yy / Y / YY Year 16, 17, 18, ...
M Month 1, 2, 3, ...
MM Month 01, 02, 03, ...
MMM Month - Str Jan, Feb, Mar, ...
MMMM Month - Str January, February, March, ...
d Day in month 1, 2, 3, ...
dd Day in month 01, 02, 03, ...
D Day in week - Str Sun, Mon, Tue, ...
DD Day in week - Str Sunday, Monday, Tuesday, ...
h/H Hour 1, 2, 3, ...
hh/HH Hour 01, 02, 03, ...
m Minute 1, 2, 3, ...
mm Minute 01, 02, 03, ...
A Meridiem-Uppercase 'AM', 'PM'
a Meridiem-Lowercase 'am', 'pm'
You can’t perform that action at this time.