logo

/Date Picker|v4.1.0

Class

new DatePicker(container, options)index.jsline 168

Create a date picker.

PARAMETERS
NameTypeDescription

container

HTMLElementstring

Container element or selector of DatePicker

options

[ Object ]

Options

PROPERTIES
NameTypeDescription

date

Datenumber = null

Initial date. Set by a Date instance or a number(timestamp). (default: no initial date)

type

'date''month''year' = 'date'

DatePicker type. Determine whether to choose a date, month, or year.

language

string = 'en'

Language code. English('en') and Korean('ko') are provided as default. To set to the other languages, use DatePicker.localeTexts.

timePicker

[ objectboolean ]

TimePicker options. Refer to the TimePicker instance's options. To create the TimePicker without customization, set to true.

calendar

[ object ]

Calendar options. Refer to the Calendar instance's options.

input

[ object ]

Input option

PROPERTIES
NameTypeDescription

element

[ HTMLElementstring ]

Input element or selector

format

string = 'yyyy-mm-dd'

Format of the Date string

selectableRanges

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

Ranges of selectable date. Set by Date instances or numbers(timestamp).

openers

Array.<HTMLElementstring> = []

List of the openers to open the DatePicker (example - icon, button, etc.)

showAlways

boolean = false

Show the DatePicker always

autoClose

boolean = true

Close the DatePicker after clicking the date

usageStatistics

boolean = true

Send a hostname to Google Analytics (default: true)

EXAMPLES
import DatePicker from 'tui-date-picker' // ES6
// const DatePicker = require('tui-date-picker'); // CommonJS
// const DatePicker = tui.DatePicker;

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

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

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

const picker3 = new DatePicker('#datepicker-container3', {
    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)
    selectableRanges: [range1, range2],
    openers: ['#opener']
});

Static Properties

localeTexts:

object

index.jsline 201

Locale text data. English('en') and Korean('ko') are provided as default.

EXAMPLES
DatePicker.localeTexts['customKey'] = {
    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: 'customKey'
});

Static Methods

createCalendar(wrapperElement, options)index.jsline 31

Create a calendar.

PARAMETERS
NameTypeDescription

wrapperElement

HTMLElementstring

Container element or selector of the Calendar

options

[ Object ]

Calendar options. Refer to the Calendar instance's options.

RETURNS:
{

Calendar

}
EXAMPLES
const calendar = DatePicker.createCalendar('#calendar-wrapper', {
   language: 'en',
   showToday: true,
   showJumpButtons: false,
   date: new Date(),
   type: 'date'
});

createRangePicker(options)index.jsline 60

Create a date-range picker.

PARAMETERS
NameTypeDescription

options

object

DateRangePicker options. Refer to the DateRangePicker instance's options.

RETURNS:
{

DateRangePicker

}
EXAMPLES
const 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 1334

Apply a CSS class to the date picker.

PARAMETERS
NameTypeDescription

className

string

Class name

addOpener(opener)index.jsline 924

Add an opener.

PARAMETERS
NameTypeDescription

opener

HTMLElementstring

element or selector of opener

addRange(start, end)index.jsline 887

Add a selectable range. Use Date instances or numbers(timestamp).

PARAMETERS
NameTypeDescription

start

Datenumber

the start date

end

Datenumber

the end date

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

datepicker.addRange(start, end);

changeLanguage(language)index.jsline 1373

Change language.

SEES
PARAMETERS
NameTypeDescription

language

string

Language code. English('en') and Korean('ko') are provided as default.

close()index.jsline 1052

Close the date picker.

destroy()index.jsline 1387

Destroy the date picker.

disable()index.jsline 1302

Disable the date picker.

drawLowerCalendar(date)index.jsline 1025

Lower the calendar type. (year -> month -> date)

PARAMETERS
NameTypeDescription

date

[ Date ]

Date to set

drawUpperCalendar(date)index.jsline 1005

Raise the calendar type. (date -> month -> year)

PARAMETERS
NameTypeDescription

date

[ Date ]

Date to set

enable()index.jsline 1282

Enable the date picker.

findOverlappedRange(startDate, endDate)index.jsline 1360

Return 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>

} - [startDate, endDate]

getCalendar()index.jsline 1227

Return the calendar instance.

RETURNS:
{

Calendar

}

getCalendarType()index.jsline 806

Return the current calendar's type.

RETURNS:
{

'date''month''year'

}

getDate()index.jsline 1097

Return the selected date.

RETURNS:
{

Date

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

getDateElements()index.jsline 1350

Return the date elements on the calendar.

RETURNS:
{

Array.<HTMLElement>

}

getLocaleText()index.jsline 1236

Return the locale text object.

RETURNS:
{

object

}

getTimePicker()index.jsline 1218

Return the time picker instance

RETURNS:
{

TimePicker

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

getType()index.jsline 814

Return the date picker's type.

RETURNS:
{

'date''month''year'

}

isDisabled()index.jsline 1325

Return whether the date picker is disabled

RETURNS:
{

boolean

}

isOpened()index.jsline 1207

Return whether the datepicker opens or not

RETURNS:
{

boolean

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

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

isSelectable(date)index.jsline 823

Return whether the date is selectable.

PARAMETERS
NameTypeDescription

date

Date

Date to check

RETURNS:
{

boolean

}

isSelected(date)index.jsline 841

Return whether the date is selected.

PARAMETERS
NameTypeDescription

date

Date

Date to check

RETURNS:
{

boolean

}

open()index.jsline 968

Open the date picker.

EXAMPLES
datepicker.open();

removeAllOpeners()index.jsline 952

Remove all openers.

removeCssClass(className)index.jsline 1342

Remove a CSS class from the date picker.

PARAMETERS
NameTypeDescription

className

string

Class name

removeOpener(opener)index.jsline 937

Remove an opener.

PARAMETERS
NameTypeDescription

opener

HTMLElementstring

element or selector of opener

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

Remove a range. Use Date instances or numbers(timestamp).

PARAMETERS
NameTypeDescription

start

Datenumber

the start date

end

Datenumber

the end date

type

null'date''month''year'

Range type. If falsy, start and end values are considered as timestamp

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

datepicker.removeRange(start, end);

setDate(date)index.jsline 1112

Select the date.

PARAMETERS
NameTypeDescription

date

Datenumber

Date instance or timestamp to set

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

setDateFormat(format)index.jsline 1192

Select the date by the date string format.

PARAMETERS
NameTypeDescription

format

[ String ]

Date string 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 1247

Set the input element

PARAMETERS
NameTypeDescription

element

stringHTMLElement

Input element or selector

options

[ object ]

Input option

PROPERTIES
NameTypeDescription

format

string = prevInput.format

Format of the Date string in the input

syncFromInput

boolean = false

Whether set the date from the input

setNull()index.jsline 1156

Set no date to be selected. (Selected date: null)

setRanges(ranges)index.jsline 854

Set selectable ranges. Previous ranges will be removed.

PARAMETERS
NameTypeDescription

ranges

Array.<Array.<Datenumber>>

Selectable ranges. Use Date instances or numbers(timestamp).

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 873

Set the calendar's type.

PARAMETERS
NameTypeDescription

type

'date''month''year'

Calendar type

EXAMPLES
datepicker.setType('month');

toggle()index.jsline 1082

Toggle the date picker.

EXAMPLES
datepicker.toggle();

Events

changeindex.jsline 1149

Occur after the selected date is changed.

SEES
EXAMPLES
// bind the 'change' event
datepicker.on('change', function() {
    console.log(`Selected date: ${datepicker.getDate()}`);
});

// unbind the 'change' event
datepicker.off('change');

closeindex.jsline 1074

Occur after the date picker closes.

SEES
EXAMPLES
// bind the 'close' event
datepicker.on('close', function() {
    alert('close');
});

// unbind the 'close' event
datepicker.off('close');

drawindex.jsline 715

Occur after the calendar is drawn.

SEES
PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

'date''month''year'

Calendar type

dateElements

Array.<HTMLElement>

elements for dates

EXAMPLES
// bind the 'draw' event
datepicker.on('draw', function(event) {
    console.log(`Draw the ${event.type} calendar and its date is ${event.date}.`);
});

// unbind the 'draw' event
datepicker.off('draw');

openindex.jsline 998

Occur after the date picker opens.

SEES
EXAMPLES
// bind the 'open' event
datepicker.on('open', function() {
    alert('open');
});

// unbind the 'open' event
datepicker.off('open');
Resizable