logo

/Date Picker|v4.0.2

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 102

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 491

Add calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

changeLanguage(language)index.jsline 457

Change language

PARAMETERS
NameTypeDescription

language

string

Language

destroy()index.jsline 506

Destroy calendar

draw(options)index.jsline 326

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 377

Draw next page

EXAMPLES
calendar.drawNext();

drawPrev()index.jsline 390

Draw previous page

EXAMPLES
calendar.drawPrev();

getDate()index.jsline 467

Returns rendered date

RETURNS:
{

Date

}

getDateElements()index.jsline 483

Returns date elements on body

RETURNS:
{

Array.<HTMLElement>

}

getNextDate()index.jsline 400

Returns next date

RETURNS:
{

Date

}

getNextYearDate()index.jsline 424

Returns next year date

RETURNS:
{

Date

}

getPrevDate()index.jsline 412

Returns prev date

RETURNS:
{

Date

}

getPrevYearDate()index.jsline 440

Returns prev year date

RETURNS:
{

Date

}

getType()index.jsline 475

Returns rendered layer type

RETURNS:
{

'date''month''year'

}

hide()index.jsline 367

Hide calendar

removeCssClass(className)index.jsline 499

Remove calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

show()index.jsline 360

Show calendar

Events

drawindex.jsline 350

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