new DatePicker(container, options)index.jsline 177

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)

weekStartDay

string = 'Sun'

Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))

EXAMPLES

// ES6
import DatePicker from 'tui-date-picker'

// CommonJS
const DatePicker = require('tui-date-picker');

// Browser
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'],
    weekStartDay: 'Mon',
});

Static Properties

localeTexts: object index.jsline 210

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 30

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 59

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 1365

Apply a CSS class to the date picker.

PARAMETERS

Name	Type	Description
className	string	Class name

addOpener(opener)index.jsline 952

Add an opener.

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector of opener

addRange(start, end)index.jsline 915

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 1404

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 1080: Close the date picker.

destroy()index.jsline 1418: Destroy the date picker.

disable()index.jsline 1333: Disable the date picker.

drawLowerCalendar(date)index.jsline 1053

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

PARAMETERS

Name	Type	Description
date	[ Date ]	Date to set

drawUpperCalendar(date)index.jsline 1033

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

PARAMETERS

Name	Type	Description
date	[ Date ]	Date to set

enable()index.jsline 1313: Enable the date picker.

findOverlappedRange(startDate, endDate)index.jsline 1391

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 1258

Return the calendar instance.

SEES

Calendar

RETURNS:

{

Calendar

}

getCalendarType()index.jsline 834: Return the current calendar's type.
RETURNS:
{
'date''month''year'
}

getDate()index.jsline 1125

Return the selected date.

RETURNS:

{

Date

} - selected date

EXAMPLES

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

getDateElements()index.jsline 1381: Return the date elements on the calendar.
RETURNS:
{
Array.<HTMLElement>
}

getLocaleText()index.jsline 1267

Return the locale text object.

SEES

DatePicker.localeTexts

RETURNS:

{

object

}

getTimePicker()index.jsline 1249

Return the time picker instance

SEES

tui-time-picker

RETURNS:

{

TimePicker

} - TimePicker instance

EXAMPLES

const timePicker = this.getTimePicker();

getType()index.jsline 842: Return the date picker's type.
RETURNS:
{
'date''month''year'
}

isDisabled()index.jsline 1356: Return whether the date picker is disabled
RETURNS:
{
boolean
}

isOpened()index.jsline 1238

Return whether the datepicker opens or not

RETURNS:

{

boolean

}

EXAMPLES

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

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

isSelectable(date)index.jsline 851

Return whether the date is selectable.

PARAMETERS

Name	Type	Description
date	Date	Date to check

RETURNS:

{

boolean

}

isSelected(date)index.jsline 869

Return whether the date is selected.

PARAMETERS

Name	Type	Description
date	Date	Date to check

RETURNS:

{

boolean

}

open()index.jsline 996

Open the date picker.

EXAMPLES

datepicker.open();

removeAllOpeners()index.jsline 980: Remove all openers.

removeCssClass(className)index.jsline 1373

Remove a CSS class from the date picker.

PARAMETERS

Name	Type	Description
className	string	Class name

removeOpener(opener)index.jsline 965

Remove an opener.

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector of opener

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

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, silent)index.jsline 1141

Select the date.

PARAMETERS

Name	Type	Description
date	Datenumber	Date instance or timestamp to set
silent	[ boolean ]	Prevents firing 'change' event if it is true.

EXAMPLES

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

setDateFormat(format)index.jsline 1223

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 1278

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 1187: Set no date to be selected. (Selected date: null)

setRanges(ranges)index.jsline 882

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 901

Set the calendar's type.

PARAMETERS

Name	Type	Description
type	'date''month''year'	Calendar type

EXAMPLES

datepicker.setType('month');

toggle()index.jsline 1110

Toggle the date picker.

EXAMPLES

datepicker.toggle();

Events

changeindex.jsline 1178

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', () => {
    console.log(`Selected date: ${datepicker.getDate()}`);
});

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

closeindex.jsline 1102

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', () => {
    alert('close');
});

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

drawindex.jsline 738

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', (event) => {
    console.log(`Draw the ${event.type} calendar and its date is ${event.date}.`);
});

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

openindex.jsline 1026

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', () => {
    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 177

SEES

PARAMETERS

PROPERTIES

PROPERTIES

EXAMPLES

Static Properties

localeTexts: objectindex.jsline 210

EXAMPLES

Static Methods

createCalendar(wrapperElement, options)index.jsline 30

SEES

PARAMETERS

RETURNS:

EXAMPLES

createRangePicker(options)index.jsline 59

SEES

PARAMETERS

RETURNS:

EXAMPLES

Instance Methods

addCssClass(className)index.jsline 1365

PARAMETERS

addOpener(opener)index.jsline 952

PARAMETERS

addRange(start, end)index.jsline 915

PARAMETERS

EXAMPLES

changeLanguage(language)index.jsline 1404

SEES

PARAMETERS

close()index.jsline 1080

destroy()index.jsline 1418

disable()index.jsline 1333

drawLowerCalendar(date)index.jsline 1053

PARAMETERS

drawUpperCalendar(date)index.jsline 1033

PARAMETERS

enable()index.jsline 1313

findOverlappedRange(startDate, endDate)index.jsline 1391

PARAMETERS

RETURNS:

getCalendar()index.jsline 1258

SEES

RETURNS:

getCalendarType()index.jsline 834

RETURNS:

getDate()index.jsline 1125

RETURNS:

EXAMPLES

getDateElements()index.jsline 1381

RETURNS:

getLocaleText()index.jsline 1267

SEES

RETURNS:

getTimePicker()index.jsline 1249

SEES

RETURNS:

EXAMPLES

getType()index.jsline 842

RETURNS:

isDisabled()index.jsline 1356

RETURNS:

isOpened()index.jsline 1238

RETURNS:

EXAMPLES

isSelectable(date)index.jsline 851

PARAMETERS

RETURNS:

isSelected(date)index.jsline 869

PARAMETERS

RETURNS:

localeTexts:
object
index.jsline 210