logo

/Date Picker|v4.1.0

Class

new Calendar(container, options)index.jsline 77

Create a calendar by DatePicker.createCalendar().

PARAMETERS
NameTypeDescription

container

HTMLElementstring

Container or selector of the Calendar

options

[ Object ]

Calendar options

PROPERTIES
NameTypeDescription

date

Date = newDate()

Initial date (default: today)

type

'date''month''year' = 'date'

Calendar type. Determine whether to show 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.

showToday

boolean = true

Show today.

showJumpButtons

boolean = false

Show the yearly jump buttons (move to the previous and next year in 'date' Calendar)

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 calendar = DatePicker.createCalendar('#calendar-wrapper', {
    language: 'en',
    showToday: true,
    showJumpButtons: false,
    date: new Date(),
    type: 'date'
});

calendar.on('draw', function(event) {
    console.log(event.date);
    console.log(event.type);
    for (let i = 0, len = event.dateElements.length; i < len; i += 1) {
        const el = event.dateElements[i];
        const date = new Date(getData(el, 'timestamp'));
        console.log(date);
    }
});

Instance Methods

addCssClass(className)index.jsline 474

Apply a CSS class to the calendar.

PARAMETERS
NameTypeDescription

className

string

Class name

changeLanguage(language)index.jsline 440

Change language.

SEES
PARAMETERS
NameTypeDescription

language

string

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

destroy()index.jsline 489

Destroy the calendar.

draw(options)index.jsline 309

Draw the calendar.

PARAMETERS
NameTypeDescription

options

[ Object ]

Draw options

PROPERTIES
NameTypeDescription

date

[ Date ]

Date to set

type

'date''month''year' = 'date'

Calendar type. Determine whether to show a date, month, or year.

EXAMPLES
calendar.draw();
calendar.draw({
    date: new Date()
});
calendar.draw({
    type: 'month'
});
calendar.draw({
    type: 'month',
    date: new Date()
});

drawNext()index.jsline 364

Draw the next page.

drawPrev()index.jsline 373

Draw the previous page.

getDate()index.jsline 450

Return the rendered date.

RETURNS:
{

Date

}

getDateElements()index.jsline 466

Returns HTML elements for dates.

RETURNS:
{

Array.<HTMLElement>

}

getNextDate()index.jsline 383

Return the next date.

RETURNS:
{

Date

}

getNextYearDate()index.jsline 407

Return the date a year later.

RETURNS:
{

Date

}

getPrevDate()index.jsline 395

Return the previous date.

RETURNS:
{

Date

}

getPrevYearDate()index.jsline 423

Return the date a year previously.

RETURNS:
{

Date

}

getType()index.jsline 458

Return the calendar's type.

RETURNS:
{

'date''month''year'

}

hide()index.jsline 357

Hide the calendar.

removeCssClass(className)index.jsline 482

Remove a CSS class from the calendar.

PARAMETERS
NameTypeDescription

className

string

Class name

show()index.jsline 350

Show the calendar.

Events

drawindex.jsline 340

Occur after the calendar draws.

SEES
PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

'date''month''year'

Calendar type

dateElements

Array.<HTMLElement>

elements for dates

EXAMPLES
// bind the 'draw' event
calendar.on('draw', function({type, date}) {
    console.log(`Draw the ${type} calendar and its date is ${date}.`);
});

// unbind the 'draw' event
calendar.off('draw');
Resizable