new DatePicker(container, options)index.jsline 146

PARAMETERS

Name

Type

Description

container

HTMLElementstring

Container element or selector of datepicker

options

[ Object ]

Options

PROPERTIES

Name

Type

Description

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

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

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

Name

Type

Description

wrapperElement

HTMLElementstring

Wrapper element or selector

options

[ Object ]

Options for initialize

PROPERTIES

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

Name

Type

Description

options

object

Date-Range picker options

PROPERTIES

Name

Type

Description

startpicker

object

Startpicker options

PROPERTIES

Name	Type	Description
input	HTMLElementstring	Startpicker input element or selector
container	HTMLElementstring	Startpicker container element or selector

endpicker

object

Endpicker options

PROPERTIES

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

Add datepicker css class

PARAMETERS

Name	Type	Description
className	string	Class name

addOpener(opener)index.jsline 882

Add opener

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector

addRange(start, end)index.jsline 845

Add a range

PARAMETERS

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

Change language

SEES

DatePicker#localeTexts

PARAMETERS

Name	Type	Description
language	string	Language

close()index.jsline 1000: Close datepicker

destroy()index.jsline 1315: Destroy

disable()index.jsline 1234

Disable

EXAMPLES

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

drawLowerCalendar(date)index.jsline 973

Lower calendar type

PARAMETERS

Name	Type	Description
date	Date	Date

drawUpperCalendar(date)index.jsline 952

Raise calendar type

PARAMETERS

Name	Type	Description
date	Date	Date

enable()index.jsline 1215

Enable

EXAMPLES

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

findOverlappedRange(startDate, endDate)index.jsline 1288

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

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

getCalendar()index.jsline 1161: Returns calendar instance
RETURNS:
{
Calendar
}

getCalendarType()index.jsline 764: Returns current calendar type
RETURNS:
{
'date''month''year'
}

getDate()index.jsline 1038

Returns date object

RETURNS:

{

Date

} - Date

EXAMPLES

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

getDateElements()index.jsline 1278: Returns date elements on calendar
RETURNS:
{
Array.<HTMLElement>
}

getLocaleText()index.jsline 1169: Returns locale text object
RETURNS:
{
object
}

getTimePicker()index.jsline 1153

Returns timepicker instance

RETURNS:

{

TimePicker

} - TimePicker instance

EXAMPLES

var timepicker = this.getTimePicker();

getType()index.jsline 772: Returns datepicker type
RETURNS:
{
'date''month''year'
}

isDisabled()index.jsline 1253: Returns whether the datepicker is disabled
RETURNS:
{
boolean
}

isOpened()index.jsline 1143

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 781

Whether the date is selectable

PARAMETERS

Name	Type	Description
date	Date	Date instance

RETURNS:

{

boolean

}

isSelected(date)index.jsline 799

Returns whether the date is selected

PARAMETERS

Name	Type	Description
date	Date	Date instance

RETURNS:

{

boolean

}

open()index.jsline 922

Open datepicker

EXAMPLES

datepicker.open();

removeAllOpeners()index.jsline 910: Remove all openers

removeCssClass(className)index.jsline 1270

Remove datepicker css class

PARAMETERS

Name	Type	Description
className	string	Class name

removeOpener(opener)index.jsline 895

Remove opener

PARAMETERS

Name	Type	Description
opener	HTMLElementstring	element or selector

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

Remove a range

PARAMETERS

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

Set date and then fire 'update' custom event

PARAMETERS

Name	Type	Description
date	Datenumber	Date instance or timestamp

EXAMPLES

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

setDateFormat(format)index.jsline 1128

Set or update date-form

PARAMETERS

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

Set input element

PARAMETERS

Name

Type

Description

element

stringHTMLElement

Input element or selector

options

[ object ]

Input option

PROPERTIES

Name	Type	Description
format	string = prevInput.format	Input text format
syncFromInput	boolean = false	Set date from input value

setNull()index.jsline 1092: Set null date

setRanges(ranges)index.jsline 813

Set selectable ranges (prev ranges will be removed)

PARAMETERS

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

Set calendar type

PARAMETERS

Name	Type	Description
type	string	set type

EXAMPLES

datepicker.setType('month');

toggle()index.jsline 1023

Toggle: open-close

EXAMPLES

datepicker.toggle();

_hide()index.jsline 527: Hide the date picker element

_onClickHandler(ev)index.jsline 603

Event handler for click of calendar

PARAMETERS

Name	Type	Description
ev	Event	An event object

_show()index.jsline 520: Show the date picker element

Events

changeindex.jsline 1085

Change event

EXAMPLES

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

    console.log(newDate);
});

closeindex.jsline 1015

Close event - DatePicker

EXAMPLES

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

drawindex.jsline 673

Fires after calendar drawing

PROPERTIES

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

EXAMPLES

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

STATIC PROPERTIES

INSTANCE METHODS

EVENTS

STATIC PROPERTIES

STATIC METHODS

INSTANCE METHODS

EVENTS

INSTANCE METHODS

EVENTS

new DatePicker(container, options)index.jsline 146

PARAMETERS

PROPERTIES

PROPERTIES

EXAMPLES

Static Properties

localeTexts: objectindex.jsline 180

EXAMPLES

Static Methods

createCalendar(wrapperElement, options)index.jsline 36

PARAMETERS

PROPERTIES

RETURNS:

EXAMPLES

createRangePicker(options)index.jsline 79

PARAMETERS

PROPERTIES

PROPERTIES

PROPERTIES

RETURNS:

EXAMPLES

Instance Methods

addCssClass(className)index.jsline 1262

PARAMETERS

addOpener(opener)index.jsline 882

PARAMETERS

addRange(start, end)index.jsline 845

PARAMETERS

EXAMPLES

changeLanguage(language)index.jsline 1301

SEES

PARAMETERS

close()index.jsline 1000

destroy()index.jsline 1315

disable()index.jsline 1234

EXAMPLES

drawLowerCalendar(date)index.jsline 973

PARAMETERS

drawUpperCalendar(date)index.jsline 952

PARAMETERS

enable()index.jsline 1215

EXAMPLES

findOverlappedRange(startDate, endDate)index.jsline 1288

PARAMETERS

RETURNS:

getCalendar()index.jsline 1161

RETURNS:

getCalendarType()index.jsline 764

RETURNS:

getDate()index.jsline 1038

RETURNS:

EXAMPLES

getDateElements()index.jsline 1278

RETURNS:

getLocaleText()index.jsline 1169

RETURNS:

getTimePicker()index.jsline 1153

RETURNS:

EXAMPLES

getType()index.jsline 772

RETURNS:

isDisabled()index.jsline 1253

RETURNS:

isOpened()index.jsline 1143

RETURNS:

EXAMPLES

isSelectable(date)index.jsline 781

PARAMETERS

RETURNS:

isSelected(date)index.jsline 799

PARAMETERS

localeTexts:
object
index.jsline 180