2015年8月11日 星期二

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

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

$(function () {
    $('#<% =TextBox_startAt.ClientID %>').datepicker();
    $('#<% =TextBox_startAt.ClientID %>').datepicker(
        "option", "dateFormat", "yy-mm-dd");
    $('#<% =TextBox_startAt.ClientID %>').datepicker(
        'option', 'onSelect', function (dateText, inst) {
            $('#<% =HiddenField_startAt.ClientID %>').val(dateText);
        });

    $('#<% =TextBox_endAt.ClientID %>').datepicker();
    $('#<% =TextBox_endAt.ClientID %>').datepicker(
        "option", "dateFormat", "yy-mm-dd");
    $('#<% =TextBox_endAt.ClientID %>').datepicker(
        'option', 'onSelect', function (dateText, inst) {
            $('#<% =HiddenField_endAt.ClientID %>').val(dateText);              
        });

    if ($('#<% =HiddenField_startAt.ClientID %>').val() != "" &&
        $('#<% =HiddenField_startAt.ClientID %>').val() != null) {
            $('#<% =TextBox_startAt.ClientID %>').datepicker(
                'setDate', $('#<% =HiddenField_startAt.ClientID %>').val());
            $('#<% =TextBox_endAt.ClientID %>').datepicker(
                'setDate', $('#<% =HiddenField_endAt.ClientID %>').val());
    }
});

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

沒有留言:

張貼留言