【问题标题】:jQuery Retain DatePicker Date text into a textbox after postback回发后jQuery将DatePicker日期文本保留到文本框中
【发布时间】:2017-09-16 22:34:46
【问题描述】:

在回发后将 DatePicker 日期文本保留到文本框中, 我正在努力理解如何在回发后将 DatePicker 日期保留到文本框中。

$(function () {
    $("#Arrival").datepicker({
        minDate: 0,
        dateFormat: 'dd/mm/yy',
        showOn: "button",
        buttonImage: "img/ui_cal_icon.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
        
    });
});
                            <input class="calendarr font" name="Arrival" readonly  type="text" id="Arrival" onchange="changedDate()">

<input type="submit" class="btns" value="Search"  />

我尝试了许多无效的选项。

你有什么建议吗?谢谢。

【问题讨论】:

  • 使用localStorage
  • @RohithKP 你有本地存储的日期选择器示例
  • @ahosam 你在使用更新面板吗?
  • @Webruster 不,我正在使用 mvc

标签: javascript jquery asp.net datepicker


【解决方案1】:
    //on submit
    // Store
    localStorage.setItem("inputVal", $('calendarr').val());

    //on page load
    // Retrieve
    var storedVal = localStorage.getItem("inputVal");
    $('calendarr').val(storedVal);

假设您使用的是 jquery UI datepicker。

//to store data on date change
    $("#Arrival").datepicker({
        onSelect: function(dateText, inst) {
            var date = $(this).val();
             localStorage.setItem("inputVal", date);
        }
    });

最初从 LS 填充数据

$( document ).ready(function() {
  $('#Arrival').datepicker("setDate", localStorage.getItem("inputVal") );
});

【讨论】:

  • 谢谢,这对我有用,但如果我想在用户关闭特定浏览器选项卡时删除数据。我只是替换 localStorage i 而不是 sessionStorage ????
  • @ahosam 不需要使用会话存储。但是您必须在必要时更新localStorage
【解决方案2】:

在这里试试这个:

回发之前(JAVASCRIPT)

function changedDate() {
    window.localStorage.setItem("Arrival", $("#Arrival").val());
}

<input class="calendarr font" name="Arrival" readonly  type="text" id="Arrival" onchange="changedDate()">

回发后(JAVASCRIPT)

$("#Arrival").val(window.localStorage.getItem("Arrival");

【讨论】:

    【解决方案3】:

    尝试按如下方式加载您的 DatePicker

    $(document).ready(function () {
    
               Sys.Application.add_load(function () {
    
              $("#Arrival").datepicker({
            minDate: 0,
            dateFormat: 'dd/mm/yy',
            showOn: "button",
            buttonImage: "img/ui_cal_icon.gif",
            buttonImageOnly: true,
            buttonText: "Select date"
    
            });
    
               });
    
           });
    

    【讨论】:

    • 我试过了,但它不起作用 button_Image 不显示
    • @ahosam button_Image 不显示是什么意思
    • 我无法打开 datepicker 从 datepicker 中选择日期
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多