new DatePicker(container, options)index.jsline 168

Create a date picker.

SEES

DatePicker example

PARAMETERS

Name

Type

Description

container

HTMLElementstring

Container element or selector of DatePicker

options

[ Object ]

Options

PROPERTIES

Name

Type

Description

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

Name	Type	Description
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.

SEES

PARAMETERS

Name	Type	Description
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.

SEES

PARAMETERS

Name	Type	Description
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

Name	Type	Description
className	string	Class name

addOpener(opener)index.jsline 924

Add an opener.

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector of opener

addRange(start, end)index.jsline 887

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

PARAMETERS

Name	Type	Description
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

To set to the other languages, use DatePicker.localeTexts.

PARAMETERS

Name	Type	Description
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

Name	Type	Description
date	[ Date ]	Date to set

drawUpperCalendar(date)index.jsline 1005

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

PARAMETERS

Name	Type	Description
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

Name	Type	Description
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.

SEES

Calendar

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.

SEES

DatePicker.localeTexts

RETURNS:

{

object

}

getTimePicker()index.jsline 1218

Return the time picker instance

SEES

tui-time-picker

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

Name	Type	Description
date	Date	Date to check

RETURNS:

{

boolean

}

isSelected(date)index.jsline 841

Return whether the date is selected.

PARAMETERS

Name	Type	Description
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

Name	Type	Description
className	string	Class name

removeOpener(opener)index.jsline 937

Remove an opener.

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector of opener

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

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

PARAMETERS

Name	Type	Description
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

Name	Type	Description
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

Name	Type	Description
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

Name

Type

Description

element

stringHTMLElement

Input element or selector

options

[ object ]

Input option

PROPERTIES

Name	Type	Description
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

Name	Type	Description
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

Name	Type	Description
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

datepicker.on() to bind event handlers.
datepicker.off() to unbind event handlers.
Refer to CustomEvents from tui-code-snippet for more methods. DatePicker mixes in the methods from CustomEvents.

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

datepicker.on() to bind event handlers.
datepicker.off() to unbind event handlers.
Refer to CustomEvents from tui-code-snippet for more methods. DatePicker mixes in the methods from CustomEvents.

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

datepicker.on() to bind event handlers.
datepicker.off() to unbind event handlers.
Refer to CustomEvents from tui-code-snippet for more methods. DatePicker mixes in the methods from CustomEvents.

PROPERTIES

Name	Type	Description
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

datepicker.on() to bind event handlers.
datepicker.off() to unbind event handlers.
Refer to CustomEvents from tui-code-snippet for more methods. DatePicker mixes in the methods from CustomEvents.

EXAMPLES

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

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

INSTANCE METHODS

EVENTS

STATIC PROPERTIES

STATIC METHODS

INSTANCE METHODS

EVENTS

INSTANCE METHODS

EVENTS

new DatePicker(container, options)index.jsline 168

SEES

PARAMETERS

PROPERTIES

PROPERTIES

EXAMPLES

Static Properties

localeTexts: objectindex.jsline 201

EXAMPLES

Static Methods

createCalendar(wrapperElement, options)index.jsline 31

SEES

PARAMETERS

RETURNS:

EXAMPLES

createRangePicker(options)index.jsline 60

SEES

PARAMETERS

RETURNS:

EXAMPLES

Instance Methods

addCssClass(className)index.jsline 1334

PARAMETERS

addOpener(opener)index.jsline 924

PARAMETERS

addRange(start, end)index.jsline 887

PARAMETERS

EXAMPLES

changeLanguage(language)index.jsline 1373

SEES

PARAMETERS

close()index.jsline 1052

destroy()index.jsline 1387

disable()index.jsline 1302

drawLowerCalendar(date)index.jsline 1025

PARAMETERS

drawUpperCalendar(date)index.jsline 1005

PARAMETERS

enable()index.jsline 1282

findOverlappedRange(startDate, endDate)index.jsline 1360

PARAMETERS

RETURNS:

getCalendar()index.jsline 1227

SEES

RETURNS:

getCalendarType()index.jsline 806

RETURNS:

getDate()index.jsline 1097

RETURNS:

EXAMPLES

getDateElements()index.jsline 1350

RETURNS:

getLocaleText()index.jsline 1236

SEES

RETURNS:

getTimePicker()index.jsline 1218

SEES

RETURNS:

EXAMPLES

getType()index.jsline 814

RETURNS:

isDisabled()index.jsline 1325

RETURNS:

isOpened()index.jsline 1207

RETURNS:

EXAMPLES

isSelectable(date)index.jsline 823

PARAMETERS

RETURNS:

isSelected(date)index.jsline 841

PARAMETERS

RETURNS:

localeTexts:
object
index.jsline 201