2015年8月11日 星期二

【ASP.NET WebForm】prevent JQuery DatePicker lose state after postback

JQuery DatePicker 在 postback 後會失去日期值的問題,我是簡單的用 HiddenField 去存,postback 發生後若 HiddenField 有值就 recover 回來。

  1. $(function () {
  2. $('#<% =TextBox_startAt.ClientID %>').datepicker();
  3. $('#<% =TextBox_startAt.ClientID %>').datepicker(
  4. "option", "dateFormat", "yy-mm-dd");
  5. $('#<% =TextBox_startAt.ClientID %>').datepicker(
  6. 'option', 'onSelect', function (dateText, inst) {
  7. $('#<% =HiddenField_startAt.ClientID %>').val(dateText);
  8. });
  9.  
  10. $('#<% =TextBox_endAt.ClientID %>').datepicker();
  11. $('#<% =TextBox_endAt.ClientID %>').datepicker(
  12. "option", "dateFormat", "yy-mm-dd");
  13. $('#<% =TextBox_endAt.ClientID %>').datepicker(
  14. 'option', 'onSelect', function (dateText, inst) {
  15. $('#<% =HiddenField_endAt.ClientID %>').val(dateText);
  16. });
  17.  
  18. if ($('#<% =HiddenField_startAt.ClientID %>').val() != "" &&
  19. $('#<% =HiddenField_startAt.ClientID %>').val() != null) {
  20. $('#<% =TextBox_startAt.ClientID %>').datepicker(
  21. 'setDate', $('#<% =HiddenField_startAt.ClientID %>').val());
  22. $('#<% =TextBox_endAt.ClientID %>').datepicker(
  23. 'setDate', $('#<% =HiddenField_endAt.ClientID %>').val());
  24. }
  25. });

※ 這個方法寫進 HiddenField 的值,在 codebehind 可以抓到。

沒有留言:

張貼留言