new DatePicker(container, options)index.jsline 142

PARAMETERS

Name

Type

Description

container

HTMLElementjQuerystring

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

Name

Type

Description

wrapperElement

HTMLElementjQuerystring

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	ElementjQuerystring	Startpicker input element
container	ElementjQuerystring	Startpicker container element

endpicker

object

Endpicker options

PROPERTIES

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

Name	Type	Description
className	string	Class name

addOpener(opener)index.jsline 825

Add opener

PARAMETERS

Name	Type	Description
opener	HTMLElementjQuerystring	element or selector

addRange(start, end)index.jsline 788

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 1246

Change language

SEES

DatePicker.localeTexts

PARAMETERS

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

Name	Type	Description
date	Date	Date

drawUpperCalendar(date)index.jsline 893

Raise calendar type

PARAMETERS

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

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

Name	Type	Description
date	Date	Date instance

RETURNS:

{

boolean

}

isSelected(date)index.jsline 742

Returns whether the date is selected

PARAMETERS

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

Name	Type	Description
className	string	Class name

removeOpener(opener)index.jsline 838

Remove opener

PARAMETERS

Name	Type	Description
opener	HTMLElementjQuerystring	element or selector

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

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 995

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 1071

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('y/M/d');
datepicker.setDateFormat('yy/MM/dd');

setInput(element, options)index.jsline 1123

Set input element

PARAMETERS

Name

Type

Description

element

stringjQueryHTMLElement

Input element

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 1035: Set null date

setRanges(ranges)index.jsline 756

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 774

Set calendar type

PARAMETERS

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

Name	Type	Description
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');
});

STATIC PROPERTIES

INSTANCE METHODS

EVENTS

STATIC PROPERTIES

STATIC METHODS

INSTANCE METHODS

EVENTS

INSTANCE METHODS

EVENTS

new DatePicker(container, options)index.jsline 142

PARAMETERS

PROPERTIES

PROPERTIES

EXAMPLES

Static Properties

localeTexts: objectindex.jsline 176

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 1207

PARAMETERS

addOpener(opener)index.jsline 825

PARAMETERS

addRange(start, end)index.jsline 788

PARAMETERS

EXAMPLES

changeLanguage(language)index.jsline 1246

SEES

PARAMETERS

close()index.jsline 941

destroy()index.jsline 1260

disable()index.jsline 1179

EXAMPLES

drawLowerCalendar(date)index.jsline 914

PARAMETERS

drawUpperCalendar(date)index.jsline 893

PARAMETERS

enable()index.jsline 1158

EXAMPLES

findOverlappedRange(startDate, endDate)index.jsline 1233

PARAMETERS

RETURNS:

getCalendar()index.jsline 1104

RETURNS:

getCalendarType()index.jsline 707

RETURNS:

getDate()index.jsline 981

RETURNS:

EXAMPLES

getDateElements()index.jsline 1223

RETURNS:

getLocaleText()index.jsline 1112

RETURNS:

getTimePicker()index.jsline 1096

RETURNS:

EXAMPLES

getType()index.jsline 715

RETURNS:

isDisabled()index.jsline 1198

RETURNS:

isOpened()index.jsline 1086

RETURNS:

EXAMPLES

isSelectable(date)index.jsline 724

PARAMETERS

RETURNS:

isSelected(date)index.jsline 742

PARAMETERS

localeTexts:
object
index.jsline 176