Hi we are using a jQueyr datepicker , when clicking on next month there is postback that happnes and after that it does not navigate to next month, it remains in the same month. my .cs code is fine
(function ($, undefined) {
//cache previous datepicker ui method
var prevDp = $.fn.datepicker;
var today = new Date();
var selectedDate = new Date();
//rewrite datepicker
$.fn.datepicker = function (options) {
var dp = this;
//call cached datepicker plugin
prevDp.call(this, options);
//extend with some dom manipulation to update the markup for jQM
//call immediately
function updateDatepicker(a, c) {
$(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#");
if (selectedDate.getFullYear() > today.getFullYear() || selectedDate.getMonth() > today.getMonth()) {
$(".ui-datepicker-prev", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-l", shadow: true, corners: true });
}
$(".ui-datepicker-next", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-r", shadow: true, corners: true });
$(".ui-datepicker-calendar th", dp).addClass("ui-bar-c");
$(".ui-datepicker-calendar td", dp).addClass("ui-body-c");
$(".ui-datepicker-calendar a", dp).buttonMarkup({ corners: false, shadow: false });
$(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date
//$(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date
$(".ui-datepicker-calendar .ui-btn", dp).each(function () {
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html(el.find(".ui-btn-text").text());
});
};
//update now
updateDatepicker();
// and on click
$(dp).click(updateDatepicker);
//return jqm obj
return this;
};
//bind to pagecreate to automatically enhance date inputs
$(".ui-page").live("pagecreate", function () {
if ($(this).attr("id") == 'undefined' || $(this).attr("id") == '')
return;
$('#' + $(this).attr("id")).find("input[type='date'], input:jqmData(type='date')").each(function () {
var inp = this;
selectedDate = new Date($(this).val());
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), minDate: new Date(), showOtherMonths: true, defaultDate: $(this).val(),
onSelect: function (dateText, inst) {
selectedDate = new Date(dateText);
if (typeof (window[$(inp).attr("dateChanged")]) === "function") {
window[$(inp).attr("dateChanged")](dateText, inst);
}
},
onChangeMonthYear: function (year, month, inst) {
selectedDate = new Date($(this).val());
if (typeof (window[$(inp).attr("dateChanged")]) === "function") {
selectedDate = new Date(year, month - 1, selectedDate.getDate());
window[$(inp).attr("dateChanged")](selectedDate.toDateString(), inst);
}
},
beforeShowDay: function (date) {
var theday = date.getDay();
var dateF = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
if ($(inp).attr("pickableDays")) {
var days = $(inp).attr("pickableDays").split(',');
if (days == null)
days = [];
var disabledDates = $(inp).attr("disabledDates");
for (var i = 0; i < days.length; i++) {
if (days[i] == theday && disabledDates.indexOf(dateF) == -1)
return [true];
}
return [false];
}
else {
var disabledDates = $(inp).attr("disabledDates");
if (disabledDates.indexOf(dateF) > -1)
return [false];
return [true];
}
}
}));
});
});
})(jQuery);
phani25485
Member
107 Points
196 Posts
jQuery mobile datepicker onChangeMonthYear losing data on Postback
Dec 13, 2012 02:45 PM|LINK
Hi we are using a jQueyr datepicker , when clicking on next month there is postback that happnes and after that it does not navigate to next month, it remains in the same month. my .cs code is fine
(function ($, undefined) { //cache previous datepicker ui method var prevDp = $.fn.datepicker; var today = new Date(); var selectedDate = new Date(); //rewrite datepicker $.fn.datepicker = function (options) { var dp = this; //call cached datepicker plugin prevDp.call(this, options); //extend with some dom manipulation to update the markup for jQM //call immediately function updateDatepicker(a, c) { $(".ui-datepicker-header", dp).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all"); $(".ui-datepicker-prev, .ui-datepicker-next", dp).attr("href", "#"); if (selectedDate.getFullYear() > today.getFullYear() || selectedDate.getMonth() > today.getMonth()) { $(".ui-datepicker-prev", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-l", shadow: true, corners: true }); } $(".ui-datepicker-next", dp).buttonMarkup({ iconpos: "notext", icon: "arrow-r", shadow: true, corners: true }); $(".ui-datepicker-calendar th", dp).addClass("ui-bar-c"); $(".ui-datepicker-calendar td", dp).addClass("ui-body-c"); $(".ui-datepicker-calendar a", dp).buttonMarkup({ corners: false, shadow: false }); $(".ui-datepicker-calendar a.ui-state-active", dp).addClass("ui-btn-active"); // selected date //$(".ui-datepicker-calendar a.ui-state-highlight", dp).addClass("ui-btn-up-e"); // today"s date $(".ui-datepicker-calendar .ui-btn", dp).each(function () { var el = $(this); // remove extra button markup - necessary for date value to be interpreted correctly el.html(el.find(".ui-btn-text").text()); }); }; //update now updateDatepicker(); // and on click $(dp).click(updateDatepicker); //return jqm obj return this; }; //bind to pagecreate to automatically enhance date inputs $(".ui-page").live("pagecreate", function () { if ($(this).attr("id") == 'undefined' || $(this).attr("id") == '') return; $('#' + $(this).attr("id")).find("input[type='date'], input:jqmData(type='date')").each(function () { var inp = this; selectedDate = new Date($(this).val()); $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), minDate: new Date(), showOtherMonths: true, defaultDate: $(this).val(), onSelect: function (dateText, inst) { selectedDate = new Date(dateText); if (typeof (window[$(inp).attr("dateChanged")]) === "function") { window[$(inp).attr("dateChanged")](dateText, inst); } }, onChangeMonthYear: function (year, month, inst) { selectedDate = new Date($(this).val()); if (typeof (window[$(inp).attr("dateChanged")]) === "function") { selectedDate = new Date(year, month - 1, selectedDate.getDate()); window[$(inp).attr("dateChanged")](selectedDate.toDateString(), inst); } }, beforeShowDay: function (date) { var theday = date.getDay(); var dateF = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear(); if ($(inp).attr("pickableDays")) { var days = $(inp).attr("pickableDays").split(','); if (days == null) days = []; var disabledDates = $(inp).attr("disabledDates"); for (var i = 0; i < days.length; i++) { if (days[i] == theday && disabledDates.indexOf(dateF) == -1) return [true]; } return [false]; } else { var disabledDates = $(inp).attr("disabledDates"); if (disabledDates.indexOf(dateF) > -1) return [false]; return [true]; } } })); }); }); })(jQuery);The below is the user control of calendar
<script type="text/javascript"> //<![CDATA[ //reset type=date inputs to text jQuery().bind("mobileinit", function() { jQuery.mobile.page.prototype.options.degradeInputs.date = true; }); function DateChanged(dateText, inst) { jQuery('#<%= hiddenDate.ClientID %>').val(dateText); <%=Page.GetPostBackEventReference(this, "datepicker")%> } //]]> </script> <input type="hidden" id="hiddenDate" runat="server" /> <input type="date" id="datepicker" value='<%= InitialDate %>' dateChanged="DateChanged" pickableDays='<%=WorkingDays %>' disabledDates='<%= DisabledDates %>' />any suggestions
Anil Pathak
Member
206 Points
54 Posts
Re: jQuery mobile datepicker onChangeMonthYear losing data on Postback
Dec 14, 2012 04:17 PM|LINK
hello
you are using this code as a postbacking,
function DateChanged(dateText, inst) { jQuery('#<%= hiddenDate.ClientID %>').val(dateText); <%=Page.GetPostBackEventReference(this, "datepicker")%> }==> write your proper scenario what do you want. otherwise jquery is providing very simple methods. you can try.
thanks
Software Developer
LnT Infotech