logo

/Date Picker|v4.3.1

Class

new Calendar(container, options)index.jsline 85

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)

weekStartDay

string = 'Sun'

Start of the week. 'Sun', 'Mon', ..., 'Sat'(default: 'Sun'(start on Sunday))

EXAMPLES
//ES6
import DatePicker from 'tui-date-picker'

// CommonJS
const DatePicker = require('tui-date-picker');

// Browser
const DatePicker = tui.DatePicker;

const calendar = DatePicker.createCalendar('#calendar-wrapper', {
    language: 'en',
    showToday: true,
    showJumpButtons: false,
    date: new Date(),
    type: 'date',
    weekStartDay: 'Mon',
});

calendar.on('draw', (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 483

Apply a CSS class to the calendar.

PARAMETERS
NameTypeDescription

className

string

Class name

changeLanguage(language)index.jsline 449

Change language.

SEES
PARAMETERS
NameTypeDescription

language

string

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

destroy()index.jsline 498

Destroy the calendar.

draw(options)index.jsline 318

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 373

Draw the next page.

drawPrev()index.jsline 382

Draw the previous page.

getDate()index.jsline 459

Return the rendered date.

RETURNS:
{

Date

}

getDateElements()index.jsline 475

Returns HTML elements for dates.

RETURNS:
{

Array.<HTMLElement>

}

getNextDate()index.jsline 392

Return the next date.

RETURNS:
{

Date

}

getNextYearDate()index.jsline 416

Return the date a year later.

RETURNS:
{

Date

}

getPrevDate()index.jsline 404

Return the previous date.

RETURNS:
{

Date

}

getPrevYearDate()index.jsline 432

Return the date a year previously.

RETURNS:
{

Date

}

getType()index.jsline 467

Return the calendar's type.

RETURNS:
{

'date''month''year'

}

hide()index.jsline 366

Hide the calendar.

removeCssClass(className)index.jsline 491

Remove a CSS class from the calendar.

PARAMETERS
NameTypeDescription

className

string

Class name

show()index.jsline 359

Show the calendar.

Events

drawindex.jsline 349

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', ({type, date}) => {
    console.log(`Draw the ${type} calendar and its date is ${date}.`);
});

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