JQuery Datepicker custromization[Answered] RSS

1 reply

Last post Feb 11, 2019 08:49 AM by Jenifer Jiang

‹ Previous Thread|Next Thread ›

Shortcuts

Claudio7810

Member

143 Points

447 Posts

JQuery Datepicker custromization

Feb 09, 2019 11:50 AM|Claudio7810|LINK

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

Jenifer Jian...

Contributor

2150 Points

705 Posts

Re: JQuery Datepicker custromization

Feb 11, 2019 08:49 AM|Jenifer Jiang|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›