logo

/Date Picker|v4.0.0

Class

new Calendar(wrapperElement, options)index.jsline 69

Calendar class

PARAMETERS
NameTypeDescription

wrapperElement

HTMLElementstring

Wrapper element or selector

options

[ Object ]

Options for initialize

PROPERTIES
NameTypeDescription

language

string = 'en'

Calendar language - Calendar.localeTexts

showToday

[ boolean ]

If true, shows today

showJumpButtons

[ boolean ]

If true, shows jump buttons (next,prev-year in 'date'-Calendar)

date

Date = newDate()

Initial date

type

string = 'date'

Calendar types - 'date', 'month', 'year'

usageStatistics

Boolean = true|false

send hostname to google analytics (default value is true)

EXAMPLES
var DatePicker = tui.DatePicker; // or require('tui-date-picker');
var calendar = DatePicker.createCalendar('#calendar-wrapper', {
    language: 'en', // There are two supporting types by default - 'en' and 'ko'.
    showToday: true,
    showJumpButtons: false,
    date: new Date(),
    type: 'date'
});

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

Static Properties

localeTexts:

object

index.jsline 101

Locale text data

EXAMPLES
var DatePicker = tui.DatePicker; // or require('tui-date-picker');

DatePicker.localeTexts['customKey'] = {
    titles: {
        // days
        DD: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        // daysShort
        D: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fir', 'Sat'],
        // months
        MMMM: [
            'January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December'
        ],
        // monthsShort
        MMM: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    titleFormat: 'MMM yyyy',
    todayFormat: 'D, MMMM dd, yyyy'
};

var calendar = DatePicker.createCalendar('#calendar-wrapper', {
    language: 'customKey',
});

Instance Methods

addCssClass(className)index.jsline 486

Add calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

changeLanguage(language)index.jsline 452

Change language

PARAMETERS
NameTypeDescription

language

string

Language

destroy()index.jsline 501

Destroy calendar

draw(options)index.jsline 321

Draw calendar

PARAMETERS
NameTypeDescription

options

object

Draw options

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

drawNext()index.jsline 372

Draw next page

EXAMPLES
calendar.drawNext();

drawPrev()index.jsline 385

Draw previous page

EXAMPLES
calendar.drawPrev();

getDate()index.jsline 462

Returns rendered date

RETURNS:
{

Date

}

getDateElements()index.jsline 478

Returns date elements on body

RETURNS:
{

Array.<HTMLElement>

}

getNextDate()index.jsline 395

Returns next date

RETURNS:
{

Date

}

getNextYearDate()index.jsline 419

Returns next year date

RETURNS:
{

Date

}

getPrevDate()index.jsline 407

Returns prev date

RETURNS:
{

Date

}

getPrevYearDate()index.jsline 435

Returns prev year date

RETURNS:
{

Date

}

getType()index.jsline 470

Returns rendered layer type

RETURNS:
{

'date''month''year'

}

hide()index.jsline 362

Hide calendar

removeCssClass(className)index.jsline 494

Remove calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

show()index.jsline 355

Show calendar

Events

drawindex.jsline 345

PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

string

Calendar type

dateElements

HTMLElement

Calendar date elements

EXAMPLES
calendar.on('draw', function(evt) {
    console.error(evt.date);
});
Resizable