母版页中的 Jquery 日期选择器答案

【问题标题】：Jquery datepicker in master page母版页中的 Jquery 日期选择器
【发布时间】：2016-03-18 22:38:08
【问题描述】：

我知道已经问过很多类似的问题，但没有一个能解决我的问题。我尝试了很多次，但日期选择器仍然无法正常工作。

所以在我的母版页中

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<head/>
 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

 </asp:ContentPlaceHolder>

在我的内容页面中（asp 内容占位符 1 内的头部部分）

     // i tried this 4 way but still not work
     // $("[id$=txtStart]")
     // $("input[id$='date2']").datepicker(); 
     <%--<%=txtStart.ClientID%>--%>
    <%-- $("#<%=txtStart.ClientID %>")--%>

     $(document).ready(function () {
         $('[id$=txtStart]').datepicker({
             minDate: 0,
             dateFormat: 'dd/mm/yy',
             numberOfMonths: 2,
             onSelect: function (dateStr) {
                 var min = $(this).datepicker('getDate'); // Get selected date
                 min.setDate(min.getDate() + 1);
                 $('[id$=txtEnd]').datepicker('option', 'minDate', min); // Set other min, default to today

             }
         });

  //another datepicker same as above
         $('[id$=txtEnd]').datepicker({
            .....
             }
         });


     });

这是我的控制

   <td class="auto-style3"><asp:TextBox ID="txtStart" runat="server" > </asp:TextBox>
   <td class="auto-style3"><asp:TextBox ID="txtEnd" runat="server" > </asp:TextBox>

【问题讨论】：

$("#"+).datepicker({}) 试试这个。
你看过jQuery UI page的例子了吗？我测试了它，这正是你所需要的
@ParthTrivedi 出现语法错误
你能告诉我吗？哪个错误
@ParthTrivedi 我已经修复了语法错误，但日期选择器仍然无法正常工作

标签： javascript c# jquery datepicker master-pages

【解决方案1】：

你的代码应该是

 $(document).ready(function () {
         $("#<%=txtStart.ClientID%>").datepicker({
             minDate: 0,
             dateFormat: 'dd/mm/yy',
             numberOfMonths: 2,
             onSelect: function (dateStr) {
                 var min = $(this).datepicker('getDate'); // Get selected date
                 min.setDate(min.getDate() + 1);
                 $("#<%=txtEnd.ClientID%>").datepicker('option', 'minDate', min); // Set other min, default to today

             }
         });

     });

【讨论】：

你可以使用$("[id$=txtStart]") 作为jQuery Selector ...没有错，他的错误是范围...

【解决方案2】：

我已经对此代码进行了测试并且可以正常工作：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        $(document).ready(function() {
            $("[id$=txtStart]").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                }
            });
            $("[id$=txtEnd]").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 2,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                }
            });
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        from <asp:TextBox ID="txtStart" runat="server"/> to <asp:TextBox ID="txtEnd" runat="server"/>
    </div>
</asp:Content>

想我会建议another datepicker range。

那么您的代码将是：

<script>
    $(document).ready(function () {

        var dtStart = $('[id$=txtStart]'),
            dtEnd = $('[id$=txtEnd]');

        $('[id$=txtStart]').dateRangePicker(
        {
            separator: ' to ',
            getValue: function() {
                if (dtStart.val() && dtEnd.val())
                    return dtStart.val() + ' to ' + dtEnd.val();
                else
                    return '';
            },
            setValue: function(s, s1, s2) {
                dtStart.val(s1);
                dtEnd.val(s2);
            }
        });
    });
</script>

和您的母版页：

<link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/daterangepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>

结果：

【讨论】：

脚本必须放入asp ContentPlaceHolderID="head"？
不，但我总是使用 ContentPlaceholder 的，一个用于内容，另一个用于脚本或 css，它们将在 <head> 标签之间移动