logo

/Date Picker|v3.3.1

Class

new DatePicker(container, options)index.jsline 142

PARAMETERS
NameTypeDescription

container

HTMLElementjQuerystring

Container element 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 ]

calendar

[ object ]

Calendar options

input

[ object ]

Input option

PROPERTIES
NameTypeDescription

element

[ HTMLElementstringjQuery ]

Input element

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 176

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

HTMLElementjQuerystring

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

ElementjQuerystring

Startpicker input element

container

ElementjQuerystring

Startpicker container element

endpicker

object

Endpicker options

PROPERTIES
NameTypeDescription

input

ElementjQuerystring

Endpicker input element

container

ElementjQuerystring

Endpicker container element

format

string

Input date-string format

type

string = 'date'

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

language

string = 'en'

Language key

timePicker

[ objectboolean ]

TimePicker option

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 1207

Add datepicker css class

PARAMETERS
NameTypeDescription

className

string

Class name

addOpener(opener)index.jsline 825

Add opener

PARAMETERS
NameTypeDescription

opener

HTMLElementjQuerystring

element or selector

addRange(start, end)index.jsline 788

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 1246

Change language

PARAMETERS
NameTypeDescription

language

string

Language

close()index.jsline 941

Close datepicker

destroy()index.jsline 1260

Destroy

disable()index.jsline 1179

Disable

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

drawLowerCalendar(date)index.jsline 914

Lower calendar type

PARAMETERS
NameTypeDescription

date

Date

Date

drawUpperCalendar(date)index.jsline 893

Raise calendar type

PARAMETERS
NameTypeDescription

date

Date

Date

enable()index.jsline 1158

Enable

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

findOverlappedRange(startDate, endDate)index.jsline 1233

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 1104

Returns calendar instance

RETURNS:
{

Calendar

}

getCalendarType()index.jsline 707

Returns current calendar type

RETURNS:
{

'date''month''year'

}

getDate()index.jsline 981

Returns date object

RETURNS:
{

Date

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

getDateElements()index.jsline 1223

Returns date elements(jQuery) on calendar

RETURNS:
{

jQuery

}

getLocaleText()index.jsline 1112

Returns locale text object

RETURNS:
{

object

}

getTimePicker()index.jsline 1096

Returns timepicker instance

RETURNS:
{

TimePicker

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

getType()index.jsline 715

Returns datepicker type

RETURNS:
{

'date''month''year'

}

isDisabled()index.jsline 1198

Returns whether the datepicker is disabled

RETURNS:
{

boolean

}

isOpened()index.jsline 1086

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 724

Whether the date is selectable

PARAMETERS
NameTypeDescription

date

Date

Date instance

RETURNS:
{

boolean

}

isSelected(date)index.jsline 742

Returns whether the date is selected

PARAMETERS
NameTypeDescription

date

Date

Date instance

RETURNS:
{

boolean

}

open()index.jsline 861

Open datepicker

EXAMPLES
datepicker.open();

removeAllOpeners()index.jsline 851

Remove all openers

removeCssClass(className)index.jsline 1215

Remove datepicker css class

PARAMETERS
NameTypeDescription

className

string

Class name

removeOpener(opener)index.jsline 838

Remove opener

PARAMETERS
NameTypeDescription

opener

HTMLElementjQuerystring

element or selector

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

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 995

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 1071

Set or update date-form

PARAMETERS
NameTypeDescription

format

[ String ]

date-format

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

setInput(element, options)index.jsline 1123

Set input element

PARAMETERS
NameTypeDescription

element

stringjQueryHTMLElement

Input element

options

[ object ]

Input option

PROPERTIES
NameTypeDescription

format

string = prevInput.format

Input text format

syncFromInput

boolean = false

Set date from input value

setNull()index.jsline 1035

Set null date

setRanges(ranges)index.jsline 756

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 774

Set calendar type

PARAMETERS
NameTypeDescription

type

string

set type

EXAMPLES
datepicker.setType('month');

toggle()index.jsline 964

Toggle: open-close

EXAMPLES
datepicker.toggle();

Events

changeindex.jsline 1028

Change event

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

    console.log(newDate);
});

closeindex.jsline 956

Close event - DatePicker

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

drawindex.jsline 618

Fires after calendar drawing

PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

string

Calendar type

$dateElements

jQuery

Calendar date elements

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

openindex.jsline 885

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