logo

/Date Picker|v4.0.2

Class

new DatePicker(container, options)index.jsline 151

PARAMETERS
NameTypeDescription

container

HTMLElementstring

Container element or selector of datepicker

options

[ Object ]

Options

PROPERTIES
NameTypeDescription

date

[ Datenumber ]

Initial date. Default - null for no initial date

type

string = 'date'

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

language

string = 'en'

Language key

timePicker

[ objectboolean ]

TimePicker options. This option's name is changed from 'timepicker' and 'timepicker' will be deprecated in v5.0.0.

calendar

[ object ]

Calendar options

input

[ object ]

Input option

PROPERTIES
NameTypeDescription

element

[ HTMLElementstring ]

Input element or selector

format

string = 'yyyy-mm-dd'

Date string format

selectableRanges

Array.<Array.<Datenumber>> = 1900/1/1~2999/12/31

Selectable date ranges.

openers

Array = []

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

showAlways

boolean = false

Whether the datepicker shows always

autoClose

boolean = true

Close after click a date

usageStatistics

Boolean = true|false

send hostname to google analytics (default value is true)

EXAMPLES
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 "{@link 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']
});

Static Properties

localeTexts:

object

index.jsline 186

Locale text data

EXAMPLES
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'
});

Static Methods

createCalendar(wrapperElement, options)index.jsline 36

Create a calendar component

PARAMETERS
NameTypeDescription

wrapperElement

HTMLElementstring

Wrapper element or selector

options

[ Object ]

Options for initialize

PROPERTIES
NameTypeDescription

language

string = 'en'

Calendar language - Calendar.localeTexts

showToday

[ boolean ]

If true, shows today

showJumpButtons

[ boolean ]

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

date

Date = newDate()

Initial date

type

string = 'date'

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

usageStatistics

Boolean = true|false

send hostname to google analytics default value is true

RETURNS:
{

Calendar

} - Instance of Calendar
EXAMPLES
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'
});

createRangePicker(options)index.jsline 79

Create a calendar component

PARAMETERS
NameTypeDescription

options

object

Date-Range picker options

PROPERTIES
NameTypeDescription

startpicker

object

Startpicker options

PROPERTIES
NameTypeDescription

input

HTMLElementstring

Startpicker input element or selector

container

HTMLElementstring

Startpicker container element or selector

endpicker

object

Endpicker options

PROPERTIES
NameTypeDescription

input

HTMLElementstring

Endpicker input element or selector

container

HTMLElementstring

Endpicker container element or selector

format

string

Input date-string format

type

string = 'date'

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

language

string = 'en'

Language key

timePicker

[ objectboolean ]

TimePicker options. This option's name is changed from 'timepicker' and 'timepicker' will be deprecated in v5.0.0.

calendar

[ object ]

Calendar option

selectableRanges

[ Array ]

Selectable ranges

showAlways

boolean = false

Whether the datepicker shows always

autoClose

boolean = true

Close after click a date

usageStatistics

Boolean = true|false

send hostname to google analytics default value is true

RETURNS:
{

DateRangePicker

} - Instance of DateRangePicker
EXAMPLES
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)]
    ]
});

Instance Methods

addCssClass(className)index.jsline 1301

Add datepicker css class

PARAMETERS
NameTypeDescription

className

string

Class name

addOpener(opener)index.jsline 905

Add opener

PARAMETERS
NameTypeDescription

opener

HTMLElementstring

element or selector

addRange(start, end)index.jsline 868

Add a range

PARAMETERS
NameTypeDescription

start

Datenumber

startDate

end

Datenumber

endDate

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

datepicker.addRange(start, end);

changeLanguage(language)index.jsline 1340

Change language

PARAMETERS
NameTypeDescription

language

string

Language

close()index.jsline 1027

Close datepicker

destroy()index.jsline 1354

Destroy

disable()index.jsline 1269

Disable

EXAMPLES
datepicker.enable();
datepicker.disable();

drawLowerCalendar(date)index.jsline 1000

Lower calendar type

PARAMETERS
NameTypeDescription

date

Date

Date

drawUpperCalendar(date)index.jsline 979

Raise calendar type

PARAMETERS
NameTypeDescription

date

Date

Date

enable()index.jsline 1246

Enable

EXAMPLES
datepicker.disable();
datepicker.enable();

findOverlappedRange(startDate, endDate)index.jsline 1327

Returns the first overlapped range from the point or range

PARAMETERS
NameTypeDescription

startDate

Datenumber

Start date to find overlapped range

endDate

Datenumber

End date to find overlapped range

RETURNS:
{

Array.<Date>

} - <a href="undefined">startDate, endDate</a>

getCalendar()index.jsline 1189

Returns calendar instance

RETURNS:
{

Calendar

}

getCalendarType()index.jsline 787

Returns current calendar type

RETURNS:
{

'date''month''year'

}

getDate()index.jsline 1065

Returns date object

RETURNS:
{

Date

} - Date
EXAMPLES
// 2015-04-13
datepicker.getDate(); // new Date(2015, 3, 13)

getDateElements()index.jsline 1317

Returns date elements on calendar

RETURNS:
{

Array.<HTMLElement>

}

getLocaleText()index.jsline 1197

Returns locale text object

RETURNS:
{

object

}

getTimePicker()index.jsline 1181

Returns timePicker instance

RETURNS:
{

TimePicker

} - TimePicker instance
EXAMPLES
var timePicker = this.getTimePicker();

getType()index.jsline 795

Returns datepicker type

RETURNS:
{

'date''month''year'

}

isDisabled()index.jsline 1292

Returns whether the datepicker is disabled

RETURNS:
{

boolean

}

isOpened()index.jsline 1171

Return whether the datepicker is opened or not

RETURNS:
{

boolean

}
EXAMPLES
datepicker.close();
datepicker.isOpened(); // false

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

isSelectable(date)index.jsline 804

Whether the date is selectable

PARAMETERS
NameTypeDescription

date

Date

Date instance

RETURNS:
{

boolean

}

isSelected(date)index.jsline 822

Returns whether the date is selected

PARAMETERS
NameTypeDescription

date

Date

Date instance

RETURNS:
{

boolean

}

open()index.jsline 949

Open datepicker

EXAMPLES
datepicker.open();

removeAllOpeners()index.jsline 933

Remove all openers

removeCssClass(className)index.jsline 1309

Remove datepicker css class

PARAMETERS
NameTypeDescription

className

string

Class name

removeOpener(opener)index.jsline 918

Remove opener

PARAMETERS
NameTypeDescription

opener

HTMLElementstring

element or selector

removeRange(start, end, type)index.jsline 887

Remove a range

PARAMETERS
NameTypeDescription

start

Datenumber

startDate

end

Datenumber

endDate

type

null'date''month''year'

Range type, If falsy -> Use strict timestamp;

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

datepicker.removeRange(start, end);

setDate(date)index.jsline 1080

Set date and then fire 'update' custom event

PARAMETERS
NameTypeDescription

date

Datenumber

Date instance or timestamp

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

setDateFormat(format)index.jsline 1156

Set or update date-form

PARAMETERS
NameTypeDescription

format

[ String ]

date-format

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

setInput(element, options)index.jsline 1208

Set input element

PARAMETERS
NameTypeDescription

element

stringHTMLElement

Input element or selector

options

[ object ]

Input option

PROPERTIES
NameTypeDescription

format

string = prevInput.format

Input text format

syncFromInput

boolean = false

Set date from input value

setNull()index.jsline 1120

Set null date

setRanges(ranges)index.jsline 836

Set selectable ranges (prev ranges will be removed)

PARAMETERS
NameTypeDescription

ranges

Array.<Array.<Datenumber>>

(2d-array) Selectable ranges

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

setType(type)index.jsline 854

Set calendar type

PARAMETERS
NameTypeDescription

type

string

set type

EXAMPLES
datepicker.setType('month');

toggle()index.jsline 1050

Toggle: open-close

EXAMPLES
datepicker.toggle();

Events

changeindex.jsline 1113

Change event

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

    console.log(newDate);
});

closeindex.jsline 1042

Close event - DatePicker

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

drawindex.jsline 696

Fires after calendar drawing

PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

string

Calendar type

dateElements

HTMLElement

Calendar date elements

EXAMPLES
datepicker.on('draw', function(evt) {
    console.log(evt.date);
});

openindex.jsline 971

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