Last post Feb 11, 2019 08:49 AM by Jenifer Jiang
Member
143 Points
447 Posts
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
Contributor
2150 Points
705 Posts
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
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:
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
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
to set the default date as today.
And add
to set the date in the second textbox.
The complete code is as follows.
result:
For more about JQuery Datepicker, you could refer to the official document: http://api.jqueryui.com/datepicker/#option-defaultDate
Best Regards,
Jenifer
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.