<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;
}
};
}
);
<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:
Post a Comment