jQuery mobile datepicker onChangeMonthYear losing data on Postback RSS

• • Reply
  

  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

  
  
  

• • Reply
  

  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

  Anil Pathak
  Software Developer
  LnT Infotech
  • Edited by Anil Pathak on Dec 14, 2012 04:17 PM
  • Marked as answer by Song-Tian - MSFT on Dec 20, 2012 09:36 AM