logo

/Date Picker|v4.1.0

Class

new DateRangePicker(options)index.jsline 71

Create a date-range picker by DatePicker.createRangePicker().

PARAMETERS
NameTypeDescription

options

object

DateRangePicker options

PROPERTIES
NameTypeDescription

startpicker

object

Startpicker options

PROPERTIES
NameTypeDescription

input

HTMLElementstring

Startpicker input element or selector

container

HTMLElementstring

Startpicker container element or selector

date

[ Datenumber ]

Initial date of the start picker. Set by a Date instance or a number(timestamp). (default: no initial date)

endpicker

object

Endpicker options

PROPERTIES
NameTypeDescription

input

HTMLElementstring

Endpicker input element or selector

container

HTMLElementstring

Endpicker container element or selector

date

[ Datenumber ]

Initial date of the end picker. 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 use 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.

format

string = 'yyyy-mm-dd'

Format of the Date string

selectableRanges

[ Array ]

Ranges of selectable date. Set by Date instances or numbers(timestamp).

showAlways

boolean = false

Show the DateRangePicker always

autoClose

boolean = true

Close the DateRangePicker 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 rangePicker = DatePicker.createRangePicker({
    startpicker: {
        input: '#start-input',
        container: '#start-container'
        date: new Date(2019, 3, 1)
    },
    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 336

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

PARAMETERS
NameTypeDescription

start

Datenumber

the start date

end

Datenumber

the end date

changeLanguage(language)index.jsline 357

Change language.

SEES
PARAMETERS
NameTypeDescription

language

string

Language code. English('en') and Korean('ko') are provided as default.

destroy()index.jsline 365

Destroy the date-range picker.

getEndDate()index.jsline 310

Return the end date.

RETURNS:
{

Date

}

getEndpicker()index.jsline 286

Return a end-datepicker.

RETURNS:
{

DatePicker

}

getStartDate()index.jsline 302

Return the start date.

RETURNS:
{

Date

}

getStartpicker()index.jsline 278

Return a start-datepicker.

RETURNS:
{

DatePicker

}

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

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

PARAMETERS
NameTypeDescription

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

setEndDate(date)index.jsline 318

Set the end date.

PARAMETERS
NameTypeDescription

date

Date

End date

setRanges(ranges)index.jsline 326

Set selectable ranges.

PARAMETERS
NameTypeDescription

ranges

Array.<Array.<numberDate>>

Selectable ranges. Use Date instances or numbers(timestamp).

setStartDate(date)index.jsline 294

Set the start date.

PARAMETERS
NameTypeDescription

date

Date

Start date

Events

change:endindex.jsline 271

Occur after the end date is changed.

SEES
EXAMPLES
// bind the 'change:end' event
rangePicker.on('change:end', function() {
    console.log(`End date: ${rangePicker.getEndDate()}`);
});

// unbind the 'change:end' event
rangePicker.off('change:end');

change:startindex.jsline 248

Occur after the start date is changed.

SEES
EXAMPLES
// bind the 'change:start' event
rangePicker.on('change:start', function() {
    console.log(`Start date: ${rangePicker.getStartDate()}`);
});

// unbind the 'change:start' event
rangePicker.off('change:start');
Resizable