new DateRangePicker(options)index.jsline 79
Create a date-range picker by DatePicker.createRangePicker().
PARAMETERS
Name Type Description options
object
DateRangePicker 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
date
[ Datenumber ]
Initial date of the start picker. Set by a Date instance or a number(timestamp). (default: no initial date)
weekStartDay
string = 'Sun'
Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))
endpicker
object
Endpicker options
PROPERTIES
Name Type Description 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)
weekStartDay
string = 'Sun'
Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))
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
// ES6 import DatePicker from 'tui-date-picker' // CommonJS const DatePicker = require('tui-date-picker'); // Browser const DatePicker = tui.DatePicker; const rangePicker = DatePicker.createRangePicker({ startpicker: { input: '#start-input', container: '#start-container' date: new Date(2019, 3, 1), weekStartDay: 'Mon', }, endpicker: { input: '#end-input', container: '#end-container', weekStartDay: 'Mon', }, 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
changeLanguage(language)index.jsline 448
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.
Events
change:endindex.jsline 288
Occur after the end date is changed.
SEES
- rangePicker.on() to bind event handlers.
- rangePicker.off() to unbind event handlers.
- Refer to CustomEvents for more methods. DateRangePicker mixes in the methods from CustomEvents.
EXAMPLES
// bind the 'change:end' event rangePicker.on('change:end', () => { console.log(`End date: ${rangePicker.getEndDate()}`); }); // unbind the 'change:end' event rangePicker.off('change:end');
change:startindex.jsline 264
Occur after the start date is changed.
SEES
- rangePicker.on() to bind event handlers.
- rangePicker.off() to unbind event handlers.
- Refer to CustomEvents for more methods. DateRangePicker mixes in the methods from CustomEvents.
EXAMPLES
// bind the 'change:start' event rangePicker.on('change:start', () => { console.log(`Start date: ${rangePicker.getStartDate()}`); }); // unbind the 'change:start' event rangePicker.off('change:start');