locked
JQuery Datepicker custromization RRS feed

  • Question

  • User-1352156089 posted

    Hi All,

    I have developed the below code in order to show 2 textboxes with 2 day pickers as per below:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="Stylesheet"type="text/css"/>
            
               
    <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="Textbox2" runat="server"></asp:TextBox>
    
            <script>
           $(document).ready(function() {
        $('#' + '<%= Textbox2.ClientID %>').datepicker({
          changeMonth: true,
          dateFormat: 'dd/mm/yy',
          changeYear: true,
          numberOfMonths: 2,
         showMonthAfterYear: true
        });
      $('#' + '<%= Textbox1.ClientID %>').datepicker({
        changeMonth: true,
          changeYear: true,
          dateFormat: 'dd/mm/yy',
         numberOfMonths: 2,
        minDate: 0,
        showMonthAfterYear: true,
          onSelect: function (selectedDate) {  
              var date2 = $(this).datepicker('getDate');
             date2.setDate(date2.getDate()+29);//set date +X day
             $('#'+'<%= Textbox2.ClientID %>').datepicker("option", "minDate",date2 );
                 setTimeout(function () {          
                 $('#' + '<%= Textbox2.ClientID %>').datepicker("show");// show to-datepicker
            },400)
          }
      })
    })
    
            </script>   

    The code is working but I need to apply some other features such as:

    1) when the page loads, I would Textbox1 to always show today's date and Textbox2 to show a date 29 days out having the prior days greyed out.

    2) when you change the date in Textbox1, the date in Textbox2 should change automatically by 29 days out.

    3) you can still change the date in Textbox2 (only more than 29 days) but all dates falling into the 29 day period should always be unclickable. 

    Could you please help me out with this one?

    Thanks a lot,

    Claudio

    Saturday, February 9, 2019 11:50 AM

Answers

  • User839733648 posted

    Hi Claudio7810,

    According to your description and code, I suggest that you could use 

    $('#id').datepicker().datepicker('setDate', 'today');
    

    to set the default date as today.

    And add

    var yourdate = $(this).datepicker('getDate'); 
    yourdate.setDate(yourdate.getDate() + 29);
    $('#id').datepicker('setDate', yourdate);

    to set the date in the second textbox.

    The complete code is as follows.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
            <asp:TextBox ID="Textbox2" runat="server"></asp:TextBox>
            <script>
                $(document).ready(function () {
                    $('#' + '<%= Textbox2.ClientID %>').datepicker({
                        changeMonth: true,
                        dateFormat: 'dd/mm/yy',
                        changeYear: true,
                        numberOfMonths: 2,
                        showMonthAfterYear: true
                    });
    
                    $('#' + '<%= Textbox1.ClientID %>').datepicker({
                        changeMonth: true,
                        changeYear: true,
                        dateFormat: 'dd/mm/yy',
                        numberOfMonths: 2,
                        minDate: 0,
                        showMonthAfterYear: true,
                        onSelect: function (selectedDate) {
                            var date2 = $(this).datepicker('getDate');
                            date2.setDate(date2.getDate() + 29);//set date +X day
                            $('#' + '<%= Textbox2.ClientID %>').datepicker('setDate', date2);
                            $('#' + '<%= Textbox2.ClientID %>').datepicker('option', 'minDate', date2);
                            setTimeout(function () {
                                $('#' + '<%= Textbox2.ClientID %>').datepicker("show");// show to-datepicker
                            }, 400)
                        }
                    }).datepicker('setDate', 'today');
                })
    
            </script>
        </form>
    </body>
    </html>

    result:

    For more about JQuery Datepicker, you could refer to the official document: http://api.jqueryui.com/datepicker/#option-defaultDate 

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 11, 2019 8:49 AM