JQuery 日期选择器行为答案

【问题标题】：JQuery datepicker behaviourJQuery 日期选择器行为
【发布时间】：2013-02-18 11:30:29
【问题描述】：

最近几天我一直在努力让这件事发挥作用。有两个日期选择器，很像开始和结束日期演示，但不能让它们工作。此代码适用于页面正文，但不适用于我想要搜索栏的标题。

         <script type="text/javascript">
        $(function() {
            $( "#from" ).datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function( selectedDate ) {
                    $( "#to" ).datepicker( "option", "minDate", selectedDate );
                }
            });
            $( "#to" ).datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function( selectedDate ) {
                    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                }
            });
        });
    </script>
    <form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
        <input type="hidden" name="a" value="dosearch"/>
        <input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
            <input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
        <input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
        <input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
    </form>

谁能帮帮我？

【问题讨论】：

怎么不工作？发生什么了？你遇到了什么错误？
你是否有相同的表格，在两个地方都复制了相同的 ID？
它给出了 id 或类冲突的错误，所以请查看
是的，我有一个具有相同 ID 的登录页面，它在那里工作得很好。但是，在其他地方它不起作用。当我说它不起作用时，它根本不会弹出

标签： php jquery css wordpress datepicker

【解决方案1】：

出于某种原因，将设置移到您正在使用的 function() 之外，日期选择器不喜欢这样/没有正确连接到框。

这是我的做法，效果很好。

Start : <input type="text" name="startdate" id="startdate" value="<?php echo $startdate;?>" />
End : <input type="text" name="enddate" id="enddate" value="<?php echo $enddate;?>" />

<script>
//date popup instigation
$( "#startdate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#startdate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#startdate" ).datepicker( "option", "showAnim", "blind" );
$( "#enddate" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
$( "#enddate" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
$( "#enddate" ).datepicker( "option", "showAnim", "blind" );
</script>

【讨论】：

调用datetimepicker 需要额外的插件:)
它完全相同的插件只是为了支持时间而不仅仅是日期。将其重命名为 .datepicker ，它的工作原理完全相同，除了这一点，他的主要问题仍然是它在 function() 包装器内部！
我知道 :) 我提到了这一点，以便您在回答中提及。

【解决方案2】：

可能是您的标头具有不同的 php 页面。因此，在您的页眉中包含 .js 文件和 datepicker 的代码。希望它对你有用。

【讨论】：

【解决方案3】：

我会使用类而不是 id，我还会放置 Javascript 和文档的末尾，这应该可以解决您的问题。

<form method="post" name="top_search_form" action="<?php bloginfo('wpurl');?>/?page_id=13" style="z-index:inherit">
  <input type="hidden" name="a" value="dosearch"/>
  <input id="top_search_input" placeholder="Procurar..." style="z-index:inherit" type="text" name="keywordphrase" value=""/>
  <input type="text" id="from" name="searchstartdate" placeholder="Partida" class="from" style="z-index:inherit"/>
  <input type="text" id="to" name="searchenddate" placeholder="Chegada" class="to" style="z-index:inherit"/>
  <input id="top_search_button" type="submit" value="Search" style="z-index:inherit">
</form>
<script type="text/javascript">
$(document).ready({
    $( ".from" ).datepicker({
        dateFormat: "dd-mm-yy",
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( ".to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( ".to" ).datepicker({
        dateFormat: "dd-mm-yy",
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( ".from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});
</script>

【讨论】：