Question

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

不幸的是，当用户在页面之间导航时，文本字段具有焦点时让日历显示的唯一方法是进行硬刷新（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();
                }
    });
       });

但都无济于事。

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

Answer 1

您希望默认打开datepicker ..当用户访问这些页面时。如果是，则必须配置datepicker的显示内联属性，请参阅示例Example datepicker display inline

$(function() {
      $('#datepicker').datepicker({altField: '#date1'});
});

datepicker需要在多个页面上刷新

1 个答案: