logo

/Date Picker|v4.0.2

Class

new DateRangePicker(options)index.jsline 57

PARAMETERS
NameTypeDescription

options

object

Date-Range picker options

PROPERTIES
NameTypeDescription

startpicker

object

Startpicker options

PROPERTIES
NameTypeDescription

input

HTMLElementstring

Startpicker input element or selector

container

HTMLElementstring

Startpicker container element or selector

endpicker

object

Endpicker options

PROPERTIES
NameTypeDescription

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 options. This option's name is changed from 'timepicker' and 'timepicker' will be deprecated in v5.0.0.

calendar

[ object ]

Calendar options

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

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

addRange(start, end)index.jsline 311

Add a range

PARAMETERS
NameTypeDescription

start

Datenumber

startDate

end

Datenumber

endDate

changeLanguage(language)index.jsline 333

Change language

PARAMETERS
NameTypeDescription

language

string

Language

destroy()index.jsline 341

Destroy date-range picker

getEndDate()index.jsline 283

Returns end-date

RETURNS:
{

Date

}

getEndpicker()index.jsline 259

Returns end-datepicker

RETURNS:
{

DatePicker

}

getStartDate()index.jsline 275

Returns start-date

RETURNS:
{

Date

}

getStartpicker()index.jsline 251

Returns start-datepicker

RETURNS:
{

DatePicker

}

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

Remove a range

PARAMETERS
NameTypeDescription

start

Datenumber

startDate

end

Datenumber

endDate

type

null'date''month''year'

Range type, If falsy -> Use strict timestamp;

setEndDate(date)index.jsline 291

Set end date

PARAMETERS
NameTypeDescription

date

Date

End date

setRanges(ranges)index.jsline 300

Set selectable ranges

PARAMETERS
NameTypeDescription

ranges

Array.<Array.<numberDate>>

Selectable ranges

setStartDate(date)index.jsline 267

Set start date

PARAMETERS
NameTypeDescription

date

Date

Start date

Events

change:endindex.jsline 244

EXAMPLES
rangepicker.on('change:end', function() {
    console.log(rangepicker.getEndDate());
});

change:startindex.jsline 228

EXAMPLES
rangepicker.on('change:start', function() {
    console.log(rangepicker.getStartDate());
});
Resizable