Hi ! I created my own datepicker using jQuer-ui.js. It works fine in layout, but when i create it in window there is no running any javaScript event like ‘change’ or ‘click’. I add this datepicker to body but i dont know how to add him to vaadin overlayers container (div).
Here is some code below:
window.dateFieldMonthYear_DateFieldMonthYearJavascriptComponent = function() {
var content = this.getElement();
var conector = this;
var popupDateField = document.createElement('div');
var textInput = document.createElement("INPUT");
textInput.setAttribute("type", "text");
textInput.className = 'v-textfield v-datefield-textfield v-widget';
textInput.style.width = '100%';
popupDateField.className = 'v-datefield v-datefield-popupcalendar v-widget v-datefield-day';
popupDateField.style.width = 'inherit';
content.innerHTML = document.createElement('div').innerHTML;
var mainClasses = $('body').children()[0]
.className.split(/\s+/);
content.appendChild(popupDateField);
popupDateField.appendChild(textInput);
$(textInput).datepicker({
showOn : "button",
buttonText : "",
firstDay : 1,
gotoCurrent : true,
showButtonPanel : true,
changeMonth : true,
changeYear : true,
prevText : "",
nextText : "",
showOtherMonths : true,
selectOtherMonths : true,
beforeShow : function(input, inst) {
for (var i = 0; i < mainClasses.length; i++) {
inst.dpDiv.addClass(mainClasses[i]
);
}
},
onSelect : function(dateText, inst) {
console.log('onSelect');
// dateText comes in as MM/DD/YY
var datePieces = dateText.split('/');
var month = datePieces[0]
;
var day = datePieces[1]
;
var year = datePieces[2]
;
// define select option values for
// corresponding element
$('select.ui-datepicker-month').val(month);
$('select.ui-datepicker-day').val(day);
$('select.ui-datepicker-year').val(year);
},
onClose : function() {
content.setValue($(textInput).datepicker("getDate"));
},
});
var ui_datepicker_year = $('.ui-datepicker-year');
$(ui_datepicker_year).change(
function() {
$('.ui-datepicker-month option').removeAttr('disabled');
// Enable all months
var today = new Date();
if ($(this).val() == today.getFullYear()) {
// If current year
$('.ui-datepicker-month option:lt('
+ today.getMonth() + ')').attr('disabled',
true); // Disable earlier months
}
$('.ui-datepicker-month').change(); // Cascade changes
});
var ui_datepicker_month = $('.ui-datepicker-month');
$(ui_datepicker_month).change(
function() {
$('.ui-datepicker-day option').removeAttr('disabled'); // Enable
// all days
var today = new Date();
if ($(ui_datepicker_year).val() == today.getFullYear()
&& $(this).val() == (today.getMonth() + 1)) {
// If current year and month
$('.ui-datepicker-days option:lt('
+ (today.getDate() - 1) + ')').attr(
'disabled', true); // Disable earlier days
}
checkDays(); // Ensure only valid dates
});
// Prevent selection of invalid dates through the select controls
function checkDays() {
var daysInMonth = 32 - new Date($(ui_datepicker_year).val(), $(
ui_datepicker_month).val(), 32).getDate();
$('.ui-datepicker-day option:gt(27)').removeAttr('disabled');
$('.ui-datepicker-day option:gt(' + (daysInMonth - 1) + ')').attr(
'disabled', true);
var ui_datepicker_day = $('.ui-datepicker-day');
if ($(ui_datepicker_day).val() > daysInMonth) {
$(ui_datepicker_day).val(daysInMonth);
}
}
content.setValue = function(value) {
conector.onSetValue(value);
};
this.getValue = function() {
return $(inputText)[0]
.value;
};
this.onStateChange = function() {
$(popupDateField).datepicker("option", "dateFormat",
convertToJquiDateFormat(this.getState().dateFormat));
$(popupDateField).datepicker("option", "currentText",
this.getState().goTodayCaption);
$.datepicker
.setDefaults($.datepicker.regional[this.getState().language]
);
};
}