datePick只在双击时显示

datePick only shows when double clicking

本文关键字：显示 双击 datePick      更新时间：2023-09-26

我想在我的网站上实现一个日期选择，但我有一个小问题:要使它出现，我必须点击文本字段，点击外部，然后再次点击内部显示。我该如何解决这个问题?下面是我的部分代码:

                 function datePicker(){                         
                $( "#from" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    changeYear: true,
                    onClose: function( selectedDate ) {
                        $( "#to" ).datepicker( "option", "minDate", selectedDate );
                        $( "#to" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
                    }
                });
                $( "#to" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    changeYear: true,
                    onClose: function( selectedDate ) {
                        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                        $( "#from" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
                    }
                });
            }   
    <input type="text" class ="date" id= "from" name="from" onclick="datePicker();"/>
    <BR>
    <input type="text" class = "date" id= "to" name="to" onfocus="datePicker();"/>

感谢您的帮助

问题如下:在函数datePicker()中，您实例化了日期拾取器，只有在此之后它才会知道打开它。

删除函数行和onclick="，使其看起来像这样:

      <script type="text/javascript">
           jQuery(document).ready(function($){
                $( "#from" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    changeYear: true,
                    onClose: function( selectedDate ) {
                        $( "#to" ).datepicker( "option", "minDate", selectedDate );
                        $( "#to" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
                    }
                });
                $( "#to" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    changeYear: true,
                    onClose: function( selectedDate ) {
                        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                        $( "#from" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
                    }
                });
            });  
       </script>
    <input type="text" class ="date" id= "from" name="from" />
    <BR>
    <input type="text" class = "date" id= "to" name="to"/>   

$(document).ready(function(){
     datePicker();
});

在文档上调用datePicker函数。准备好并删除onclick，然后尝试

相关文章：