母版頁中的jQuery datepicker

Question

我知道已經有很多類似的問題，但是沒有一個解決了我的問題。 我嘗試了很多次，但日期選擇器仍然無法正常工作。

所以在我的母版頁

<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>

Answer 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

             }
         });

     });

Answer 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>

以為我會建議另一個日期選擇器范圍 。

那么您的代碼將是：

<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>

結果：

母版頁中的jQuery datepicker

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-13 10:58:50

解決方案2
0 2015-12-13 11:09:50

母版頁中的jQuery datepicker

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-13 10:58:50

解決方案2 0 2015-12-13 11:09:50

解決方案1
1 已采納 2015-12-13 10:58:50

解決方案2
0 2015-12-13 11:09:50