Search code examples
javascriptc#jquerydatepickermaster-pages

Jquery datepicker in master page

I know there is so many similar question already been asked but none of them solved my problem. I tried so many times but the datepicker still not work.

So in my master page

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

In my content Page(head section inside asp content place holder 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({
            .....
             }
         });


     });

this is my control

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

  • Your code should be 

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

             }
         });

     });