DatePicker(container, optionsopt)

new DatePicker(container, optionsopt)

Parameters:
Name Type Attributes Description
container HTMLElement | jQuery | string

Container element of datepicker

options Object <optional>

Options

Properties
Name Type Attributes Default Description
date Date | number <optional>

Initial date. Default - null for no initial date

type string <optional>
'date'

DatePicker type - ('date' | 'month' | 'year')

language string <optional>
'en'

Language key

timePicker object | boolean <optional>

TimePicker options

calendar object <optional>

Calendar options

input object <optional>

Input option

Properties
Name Type Attributes Default Description
element HTMLElement | string | jQuery <optional>

Input element

format string <optional>
'yyyy-mm-dd'

Date string format

selectableRanges Array.<Array.<(Date|number)>> <optional>
1900/1/1 ~ 2999/12/31
  • Selectable date ranges.
openers Array <optional>
[]

Opener button list (example - icon, button, etc.)

showAlways boolean <optional>
false

Whether the datepicker shows always

autoClose boolean <optional>
true

Close after click a date

usageStatistics Boolean <optional>
true|false

send hostname to google analytics [default value is true]

Example
var DatePicker = tui.DatePicker; // or require('tui-date-picker');

var range1 = [new Date(2015, 2, 1), new Date(2015, 3, 1)];
var range2 = [1465570800000, 1481266182155]; // timestamps

var picker1 = new DatePicker('#datepicker-container1', {
    showAlways: true
});

var picker2 = new DatePicker('#datepicker-container2', {
   showAlways: true,
   timepicker: true
});

var picker3 = new DatePicker('#datepicker-container3', {
    // There are two supporting types by default - 'en' and 'ko'.
    // See "DatePicker.localeTexts"
    language: 'ko',
    calendar: {
        showToday: true
    },
    timepicker: {
        showMeridiem: true,
        defaultHour: 13,
        defaultMinute: 24
    },
    input: {
        element: '#datepicker-input',
        format: 'yyyy년 MM월 dd일 hh:mm A'
    }
    type: 'date',
    date: new Date(2015, 0, 1) // or timestamp. (default: null-(no initial date))
    selectableRanges: [range1, range2],
    openers: ['#opener']
});

Members

static localeTexts :object

Locale text data

Example
var DatePicker = tui.DatePicker; // or require('tui-date-picker');

DatePicker.localeTexts['customKey'] = {
    titles: {
        // days
        DD: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        // daysShort
        D: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fir', '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'
};

var datepicker = new tui.DatePicker('#datepicker-container', {
    language: 'customKey'
});

autoClose :boolean

Close after select a date

showAlways :boolean

Show always or not

Methods

static createCalendar(wrapperElement, optionsopt) → {Calendar}

Create a calendar component

Parameters:
Name Type Attributes Description
wrapperElement HTMLElement | jQuery | string

Wrapper element or selector

options Object <optional>

Options for initialize

Properties
Name Type Attributes Default Description
language string <optional>
'en'

Calendar language - Calendar.localeTexts

showToday boolean <optional>

If true, shows today

showJumpButtons boolean <optional>

If true, shows jump buttons (next,prev-year in 'date'-Calendar)

date Date <optional>
new Date()

Initial date

type string <optional>
'date'

Calendar types - 'date', 'month', 'year'

usageStatistics Boolean <optional>
true|false

send hostname to google analytics [default value is true]

Returns:
Calendar -

Instance of Calendar

Example
var DatePicker = tui.DatePicker; // or require('tui-date-picker');
var calendar = DatePicker.createCalendar('#calendar-wrapper', {
   language: 'en',
   showToday: true,
   showJumpButtons: false,
   date: new Date(),
   type: 'date'
});

static createRangePicker(options) → {DateRangePicker}

Create a calendar component

Parameters:
Name Type Description
options object

Date-Range picker options

Properties
Name Type Attributes Default Description
startpicker object

Startpicker options

Properties
Name Type Description
input Element | jQuery | string

Startpicker input element

container Element | jQuery | string

Startpicker container element

endpicker object

Endpicker options

Properties
Name Type Description
input Element | jQuery | string

Endpicker input element

container Element | jQuery | string

Endpicker container element

format string

Input date-string format

type string <optional>
'date'

DatePicker type - ('date' | 'month' | 'year')

language string <optional>
'en'

Language key

timePicker object | boolean <optional>

TimePicker option

calendar object <optional>

Calendar option

selectableRanges Array.<Array.<(Date|number)>> <optional>

Selectable ranges

showAlways boolean <optional>
false

Whether the datepicker shows always

autoClose boolean <optional>
true

Close after click a date

usageStatistics Boolean <optional>
true|false

send hostname to google analytics [default value is true]

Returns:
DateRangePicker -

Instance of DateRangePicker

Example
var DatePicker = tui.DatePicker; // or require('tui-date-picker');
var rangepicker = DatePicker.createRangePicker({
    startpicker: {
        input: '#start-input',
        container: '#start-container'
    },
    endpicker: {
        input: '#end-input',
        container: '#end-container'
    },
    type: 'date',
    format: 'yyyy-MM-dd'
    selectableRanges: [
        [new Date(2017, 3, 1), new Date(2017, 5, 1)],
        [new Date(2017, 6, 3), new Date(2017, 10, 5)]
    ]
});

addCssClass(className)

Add datepicker css class

Parameters:
Name Type Description
className string

Class name

addOpener(opener)

Add opener

Parameters:
Name Type Description
opener HTMLElement | jQuery | string

element or selector

addRange(start, end)

Add a range

Parameters:
Name Type Description
start Date | number

startDate

end Date | number

endDate

Example
var start = new Date(2015, 1, 3);
var end = new Date(2015, 2, 6);

datepicker.addRange(start, end);

changeLanguage(language)

Change language

Parameters:
Name Type Description
language string

Language

See:

close()

Close datepicker

destroy()

Destroy

disable()

Disable

Example
datepicker.enable();
datepicker.disable();

drawLowerCalendar(date)

Lower calendar type

  • YEAR --> MONTH --> DATE
Parameters:
Name Type Description
date Date

Date

drawUpperCalendar(date)

Raise calendar type

  • DATE --> MONTH --> YEAR
Parameters:
Name Type Description
date Date

Date

enable()

Enable

Example
datepicker.disable();
datepicker.enable();

findOverlappedRange(startDate, endDate) → {Array.<Date>}

Returns the first overlapped range from the point or range

Parameters:
Name Type Description
startDate Date | number

Start date to find overlapped range

endDate Date | number

End date to find overlapped range

Returns:
Array.<Date> -
  • [startDate, endDate]

getCalendar() → {Calendar}

Returns calendar instance

Returns:
Calendar

getCalendarType() → {'date'|'month'|'year'}

Returns current calendar type

Returns:
'date' | 'month' | 'year'

getDate()nullable {Date}

Returns date object

Returns:
Date -
  • Date
Example
// 2015-04-13
datepicker.getDate(); // new Date(2015, 3, 13)

getDateElements() → {jQuery}

Returns date elements(jQuery) on calendar

Returns:
jQuery

getLocaleText() → {object}

Returns locale text object

Returns:
object

getTimePicker()nullable {TimePicker}

Returns timepicker instance

Returns:
TimePicker -
  • TimePicker instance
Example
var timepicker = this.getTimePicker();

getType() → {'date'|'month'|'year'}

Returns datepicker type

Returns:
'date' | 'month' | 'year'

isDisabled() → {boolean}

Returns whether the datepicker is disabled

Returns:
boolean

isOpened() → {boolean}

Return whether the datepicker is opened or not

Returns:
boolean
Example
datepicker.close();
datepicker.isOpened(); // false

datepicker.open();
datepicker.isOpened(); // true

isSelectable(date) → {boolean}

Whether the date is selectable

Parameters:
Name Type Description
date Date

Date instance

Returns:
boolean

isSelected(date) → {boolean}

Returns whether the date is selected

Parameters:
Name Type Description
date Date

Date instance

Returns:
boolean

open()

Open datepicker

Example
datepicker.open();

removeAllOpeners()

Remove all openers

removeCssClass(className)

Remove datepicker css class

Parameters:
Name Type Description
className string

Class name

removeOpener(opener)

Remove opener

Parameters:
Name Type Description
opener HTMLElement | jQuery | string

element or selector

removeRange(start, end, type)

Remove a range

Parameters:
Name Type Description
start Date | number

startDate

end Date | number

endDate

type null | 'date' | 'month' | 'year'

Range type, If falsy -> Use strict timestamp;

Example
var start = new Date(2015, 1, 3);
var end = new Date(2015, 2, 6);

datepicker.removeRange(start, end);

setDate(date)

Set date and then fire 'update' custom event

Parameters:
Name Type Description
date Date | number

Date instance or timestamp

Example
datepicker.setDate(new Date()); // Set today

setDateFormat(formatopt)

Set or update date-form

Parameters:
Name Type Attributes Description
format String <optional>

date-format

Example
datepicker.setDateFormat('yyyy-MM-dd');
datepicker.setDateFormat('MM-dd, yyyy');
datepicker.setDateFormat('y/M/d');
datepicker.setDateFormat('yy/MM/dd');

setInput(element, optionsopt)

Set input element

Parameters:
Name Type Attributes Description
element string | jQuery | HTMLElement

Input element

options object <optional>

Input option

Properties
Name Type Attributes Default Description
format string <optional>
prevInput.format

Input text format

syncFromInput boolean <optional>
false

Set date from input value

setNull()

Set null date

setRanges(ranges)

Set selectable ranges (prev ranges will be removed)

Parameters:
Name Type Description
ranges Array.<Array.<(Date|number)>>

(2d-array) Selectable ranges

Example
datepicker.setRanges([
    [new Date(2017, 0, 1), new Date(2018, 0, 2)],
    [new Date(2015, 2, 3), new Date(2016, 4, 2)]
]);

toggle()

Toggle: open-close

Example
datepicker.toggle();

Events

change

Change event

Example
datepicker.on('change', function() {
    var newDate = datepicker.getDate();

    console.log(newDate);
});

close

Close event - DatePicker

Example
datepicker.on('close', function() {
    alert('close');
});

draw

Fires after calendar drawing

Parameters:
Name Type Description
event Object

See Calendar#event:draw

Properties
Name Type Description
date Date

Calendar date

type string

Calendar type

$dateElements jQuery

Calendar date elements

error

Parsing error from input-text

Example
datepicker.on('error', function(err) {
    console.error(err.message);
});

open

Example
datepicker.on('open', function() {
    alert('open');
});