0

我在财务会计网站的每个页面上都有一个日期选择器表单。日期选择器旨在允许用户选择他们想要显示的数据的日期范围。

不幸的是，当用户从一个页面导航到另一个页面时，当文本字段具有焦点时显示日历的唯一方法是硬刷新 (Ctrl-R)。不是最优的。

这是表格：

<li data-data-theme='b' >
<label for="from">From</label>  
<input type="text" id="from" name="from"/>
</li>

<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>

这是jquery：

    $(function() {

        console.log("hello world 2");

        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#to" ).datepicker();
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#from" ).datepicker();
            }
        });
    });


}

$(document).ready(function(){

    console.log("hello world");


    $(function() {

        console.log("hello world 2");

        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            showOn: 'button', 
        buttonImage: 'images/datepicker_icon.png', 
        buttonImageOnly: true,

            onSelect: function( selectedDate ) {
                $( "#to" ).datepicker();
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 3,
            stepMonths: 3,
            showOtherMonths: true,
            showOptions: {direction: 'up'},
            showButtonPanel: true,
            yearRange: "2011:2019", 
            showAnim: "fold",
            dateFormat: "yy-mm-dd",
            onSelect: function( selectedDate ) {
                $( "#from" ).datepicker();
            }
        });
    });



});

我尝试更改表单以包含对类的引用：例如：

<li data-data-theme='b' >
<label for="from">From</label>  
<input class='datepicker' type="text" id="from" name="from"/>
</li>

<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>

然后在jquery函数中引用它：

   $(function() {

      console.log("hello world 2");

    $( ".datepicker" ).datepicker({

           ...

           onSelect: function( selectedDate ) {
        $( ".datepicker" ).datepicker();
                }
    });
       });

但一切都无济于事。

那么，问题来了：当用户导航到网站上的新页面时，如何显示日期选择器日历？

4

1 回答 1

0

您想默认打开日期选择器吗？当用户访问这些页面时。如果是，则必须配置 datepicker 的 display inline 属性，请参见示例Example datepicker display inline

$(function() {
      $('#datepicker').datepicker({altField: '#date1'});
});
于 2012-06-22T05:38:28.687 回答