23 October 2012

AlloyUI datepicker

    <aui:column columnwidth="50" first="true" >
        <label><liferay-ui:message key="from"/> </label>
        <div class="aui-datepicker-example aui-helper-clearfix" id="staticDatePicker">
            <div class="aui-datepicker aui-datepicker-display aui-helper-clearfix" id="datePickerBB">
                <div class="aui-datepicker-content" id="srcNode">
                    <div class="aui-datepicker-select-wrapper">
                        <select id="yearNode" class="custom-field aui-datepicker-year">
                            <option value="2010">2010</option>
                        </select>
                        <select id="monthNode" class="custom-field aui-datepicker-month">
                            <option value="0">January</option>
                            <option value="1">February</option>
                            <option value="2">March</option>
                            <option value="3">April</option>
                            <option value="4">May</option>
                            <option value="5" >June</option>
                            <option value="6">July</option>
                            <option value="7">August</option>
                            <option value="8">September</option>
                            <option value="9">October</option>
                            <option value="10">November</option>
                            <option value="11">December</option>
                        </select>
                        <select id="dayNode" class="custom-field aui-datepicker-day">
                            <option value="9">9</option>
                        </select>
                    </div>
                    <div class="aui-datepicker-button-wrapper">
                        <button type="button" id="buttonTest" class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only">
                            <span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </aui:column>
    <aui:column columnwidth="50" first="true" >
        <label>To: </label>
        <div class="aui-datepicker-example aui-helper-clearfix" id="staticDatePicker1">
            <div class="aui-datepicker aui-datepicker-display aui-helper-clearfix" id="datePickerBB1">
                <div class="aui-datepicker-content" id="srcNode1">
                    <div class="aui-datepicker-select-wrapper">
                        <select id="yearNode1" class="custom-field aui-datepicker-year">
                            <option value="2012">2012</option>
                        </select>
                        <select id="monthNode1" class="custom-field aui-datepicker-month">
                            <option value="0">January</option>
                            <option value="1">February</option>
                            <option value="2">March</option>
                            <option value="3">April</option>
                            <option value="4">May</option>
                            <option value="5" >June</option>
                            <option value="6">July</option>
                            <option value="7">August</option>
                            <option value="8">September</option>
                            <option value="9">October</option>
                            <option value="10">November</option>
                            <option value="11">December</option>
                        </select>
                        <select id="dayNode1" class="custom-field aui-datepicker-day">
                            <option value="9">9</option>
                        </select>
                    </div>
                    <div class="aui-datepicker-button-wrapper">
                        <button type="button" id="buttonTest" class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only">
                            <span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </aui:column>


AUI().ready( 'aui-autocomplete', 'aui-io-request','aui-datepicker', function(A){

var resourceUrl = "<portlet:resourceURL />";
var datepicker2 = new A.DatePickerSelect({
        srcNode: '#srcNode',
        contentBox: '#srcNode',
        boundingBox: '#datePickerBB',

        calendar: {
            selectedDates: [new Date(2011, 2, 20)],
            dateFormat: '%m/%d/%y'
        },

        // dayNode: '#dayNode',
        // monthNode: '#monthNode',
        // yearNode: '#yearNode',

         dayNodeName: 'fromDay',
         monthNodeName: 'fromMonth',
         yearNodeName: 'fromYear',

        nullableDay: true,
        nullableMonth: true,
        nullableYear: true,

        // populateMonth: false,
        // populateDay: false,
        // populateYear: false,
        yearRange: [ 1980, 2020 ]
    }).render('#staticDatePicker');

    var datepicker3 = new A.DatePickerSelect({
        srcNode: '#srcNode1',
        contentBox: '#srcNode1',
        boundingBox: '#datePickerBB1',

        calendar: {
            selectedDates: [new Date(2011, 2, 20)],
            dateFormat: '%m/%d/%y'
        },

         dayNode: '#dayNode1',
         monthNode: '#monthNode1',
         yearNode: '#yearNode1',

         dayNodeName: 'toDay',
         monthNodeName: 'toMonth',
         yearNodeName: 'toYear',

        nullableDay: true,
        nullableMonth: true,
        nullableYear: true,

        // populateMonth: false,
        // populateDay: false,
        // populateYear: false,
        yearRange: [ 1980, 2020 ]
    }).render('#staticDatePicker1');


validate=function() {
    var date1;
    var date2;

        datepicker2.calendar.eachSelectedDate(function(date) {
              date1= date.getTime();

                        });
                        datepicker3.calendar.eachSelectedDate(function(date) {
                            date2= date.getTime();

                        });


           if(date1 > date2 )
               {
               alert("Please select valid Date");
               return false;
               }else
                   {
                   return true;
                   }

           };







}
);

No comments: