Fork me on GitHub

Example: Basic datepicker field creation

How to create a datepicker field.

Basic DatePickerField creation

Use the following code to create a basic inputEx DatePickerField.

Change DatePickerField date format

Use the following code to select another date format

DatePickerField Updated event

Listening for the updated event

Use a string input/output formatting

The setValue/getValue methods will parse/format the dates to the valueFormat option.

Disable DatePicker

Disable method

Disable readonly option

If you want to let users enter the date manually

Custom renderer

Custom render some public holidays

Real life example

Customize the calendar with two plugins (show week numbers, add year navigation), in the french locale.

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-datepicker', function(Y) {
    
    // Example 1
    new Y.inputEx.DatePickerField({parentEl: 'container1'});
    
    
    // Example 2
    new Y.inputEx.DatePickerField({parentEl: 'container2', value: new Date(1984,0,6), dateFormat: 'd/m/Y'});
    
    
    // Example 3
    var datepicker = new Y.inputEx.DatePickerField({parentEl: 'container3', value: new Date(), dateFormat: 'd/m/Y'});
    datepicker.on('updated', function(value) {
        Y.one('#container3').appendChild( Y.inputEx.cn('div',null,null, value) );
    });
    
    
    // Example 4
    var datepicker2 = new Y.inputEx.DatePickerField({parentEl: 'container4', value: new Date(), valueFormat: 'Y-m-d', value: '2009-01-01'});
    datepicker2.on('updated', function(value) {
        Y.one('#container4').appendChild( Y.inputEx.cn('div',null,null, value) );
    });
    
    
    // Example 5
    var f = new Y.inputEx.DatePickerField({parentEl: 'container5'});
    
    var exampleDiv = Y.one('#container5');
    
    var button1 = Y.inputEx.cn('button', null, null, 'disable()');
    exampleDiv.appendChild(button1); 
    Y.one(button1).on('click', function() { f.disable(); });
    
    var button2 = Y.inputEx.cn('button', null, null, 'enable()');
    exampleDiv.appendChild(button2); 
    Y.one(button2).on('click', function() { f.enable(); });
    
    
    // Example 6
    new Y.inputEx.DatePickerField({parentEl: 'container6', readonly: false, showMsg: true});


    // Example 7
    var publicHoliday = {

        "2013" : {
         //01/01/2013
            "0" : {
                "1" : "publicHoliday"
            },
            "3" : {
                "1" : "publicHoliday"
            },
            "4" : {
                "1,8,9,20" : "publicHoliday"
            },
            "6" : {
                "14" : "publicHoliday"
            },
            "7" : {
                "15" : "publicHoliday"
            },
            "10" : {
                "1,11" : "publicHoliday"
            },
            "11" : {
                "25" : "publicHoliday"
            }
        }
    };

    function filterFunction(dates, node, rules) {
        var numberOfRules = rules.length,
            rule, i;

        for(i = 0; i < numberOfRules; i++) {
            rule = rules[i];

            //if(rule === "publicHoliday") { //  node.setStyle("color", "red"); }
        }
    }

    new Y.inputEx.DatePickerField({
        parentEl: 'container7',
        calendarOpts: {                
            customRenderer: {
               rules: publicHoliday,
               filterFunction: filterFunction
            },
            disabledDatesRule: "publicHoliday"
        }
    });

});
    

// example 8
YUI({lang: 'fr'}).use('calendar', 'inputex-calendar-year-navigator-plugin', 'inputex-calendar-week-number-plugin', 'inputex-datepicker', function(Y) {
   
   new Y.inputEx.DatePickerField({
       parentEl: 'container8',
       calendarOpts: {
           plugins: [Y.Plugin.CalendarYearNavigator, Y.Plugin.CalendarWeekNumber]
       }
   });
   
});