Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 month ago
Own datepicker using AbstractJavaScriptComponent
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]);
};
}
Last updated on
You cannot reply to this thread.