logo

/Date Picker|v3.3.3

Class

new Calendar(wrapperElement, options)index.jsline 67

Calendar class

PARAMETERS
NameTypeDescription

wrapperElement

HTMLElementjQuerystring

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) {
    console.log(event.date);
    console.log(event.type);
    event.dateElements.each(function() {
        var $el = $(this);
        var date = new Date($el.data('timestamp'));
        console.log(date);
    });
});

Static Properties

localeTexts:

object

index.jsline 99

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 483

Add calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

changeLanguage(language)index.jsline 449

Change language

PARAMETERS
NameTypeDescription

language

string

Language

destroy()index.jsline 498

Destroy calendar

draw(options)index.jsline 318

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 369

Draw next page

EXAMPLES
calendar.drawNext();

drawPrev()index.jsline 382

Draw previous page

EXAMPLES
calendar.drawPrev();

getDate()index.jsline 459

Returns rendered date

RETURNS:
{

Date

}

getDateElements()index.jsline 475

Returns date elements(jQuery) on body

RETURNS:
{

jQuery

}

getNextDate()index.jsline 392

Returns next date

RETURNS:
{

Date

}

getNextYearDate()index.jsline 416

Returns next year date

RETURNS:
{

Date

}

getPrevDate()index.jsline 404

Returns prev date

RETURNS:
{

Date

}

getPrevYearDate()index.jsline 432

Returns prev year date

RETURNS:
{

Date

}

getType()index.jsline 467

Returns rendered layer type

RETURNS:
{

'date''month''year'

}

hide()index.jsline 359

Hide calendar

removeCssClass(className)index.jsline 491

Remove calendar css class

PARAMETERS
NameTypeDescription

className

string

Class name

show()index.jsline 352

Show calendar

Events

drawindex.jsline 342

PROPERTIES
NameTypeDescription

date

Date

Calendar date

type

string

Calendar type

$dateElements

jQuery

Calendar date elements

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