Remove From My Forums

Jquery Date Picker Settings

Question

User-1352156089 posted

Hi All,

I am trying to set my jquery datepicker calendar but it seems I am not able to make it work:

Below is my code:

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


function addDays(date, days) {
  var dat = date;
  dat.setDate(dat.getDate() + days);
  return dat;
}
$(document).ready(function() {
  $('#' + '<%= Textbox1.ClientID %>').datepicker({
    changeMonth: true,
      changeYear: true,
      dateFormat: 'dd/mm/yy',
     numberOfMonths: 2,
    minDate: 0,
    showMonthAfterYear: true,
    onSelect: function(selectedDate) {
      console.log(selectedDate )
      $('#' + '<%= Textbox2.ClientID %>').datepicker('option', 'minDate', addDays(new Date(selectedDate), 1));
    }
  });
  $('#' + '<%= Textbox2.ClientID %>').datepicker({
      changeMonth: true,
      dateFormat: 'dd/mm/yy',
      changeYear: true,
       numberOfMonths: 2,
     showMonthAfterYear: true
  });
});
 </script>

It's should be a simple form with From - To date with the following requirements:

in the From calendar I will need to select and show today's date
in the To calendar a default + 30 days should be seen
When you select the calendar, you cannot go in the past and when you select a date, in the to calendar I should see at least 1 day in advance not to select the same day selected in the From calendar

Any idea about how to accomplish the above?

In addition, I saw around a sort of calendar that you can select from 1 text box and once selected you can select both the From and the To dates in the same calendar. Could you point me to the right direction?

Thanks

Wednesday, February 6, 2019 7:07 PM

Answers

User-1174608757 posted

Hi Claudio7810,

According to your description, I have made a sample.Firstly, I suggest you to set the mindate of to-datepicker by the select date of from-datepicker ,then you should set a timout to show to-datepicker because From date-picker need a time to fadeout else the css style will go wrong.

What is more,

in the To calendar a default + 30 days should be seen

Since you have show two months in datepicker and you just want to select today's date . 30 days is default to see.Do you mean to make the date after 30 days disabled?

Here is a demo ,I hope it could help you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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>
            <input id="Button1" type="button" value="button" />
      <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()+1);//set date +1 day
         $('#'+'<%= Textbox2.ClientID %>').datepicker("option", "minDate",date2 );
         
        setTimeout(function () {          
             $('#' + '<%= Textbox2.ClientID %>').datepicker("show");// show to-datepicker
        },1000)
     
      }
  })
  
})
 </script>  
        </div>
    </form>
</body>
</html>

It shows as below:

Best Regards

Wei Zhang

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, February 7, 2019 8:51 AM

All replies

User-1174608757 posted

Hi Claudio7810,

What is more,

in the To calendar a default + 30 days should be seen

Since you have show two months in datepicker and you just want to select today's date . 30 days is default to see.Do you mean to make the date after 30 days disabled?

Here is a demo ,I hope it could help you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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>
            <input id="Button1" type="button" value="button" />
      <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()+1);//set date +1 day
         $('#'+'<%= Textbox2.ClientID %>').datepicker("option", "minDate",date2 );
         
        setTimeout(function () {          
             $('#' + '<%= Textbox2.ClientID %>').datepicker("show");// show to-datepicker
        },1000)
     
      }
  })
  
})
 </script>  
        </div>
    </form>
</body>
</html>

It shows as below:

Best Regards

Wei Zhang

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, February 7, 2019 8:51 AM

0

Sign in to vote

User-1352156089 posted

Hi Wei Zhang,

thank you for your help with this one and it works like a charm.

Regarding your question, yes, I needed the second datepicker to disable a range below the 30 days and I made it work by adding the minDate option in Textbox2 Jquery code.

Do you have any idea about how to have the dates in both textboxes to load when page loads? I need them to be today's date (1st text box) and 30 days out for 2nd textbox.

Thanks again,
Claudio

Thursday, February 7, 2019 1:40 PM

User2103319870 posted

Do you have any idea about how to have the dates in both textboxes to load when page loads? I need them to be today's date (1st text box) and 30 days out for 2nd textbox.

You can try with below code.

$(document).ready(function () {
			//Code to set default values
			$('#' + '<%= Textbox1.ClientID %>').datepicker().datepicker("setDate", new Date());
			//Get Todays date and add 30 days
			var newdate = new Date();
			newdate.setDate(newdate.getDate() + 30);
			//Set second textbox 
			$('#' + '<%= Textbox2.ClientID %>').datepicker().datepicker("setDate", new Date(newdate));

			$('#' + '<%= 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() + 1);//set date +1 day
					$('#' + '<%= Textbox2.ClientID %>').datepicker("option", "minDate", date2);

					setTimeout(function () {
						$('#' + '<%= Textbox2.ClientID %>').datepicker("show");// show to-datepicker
					}, 1000)

				}
			});
		});

Thursday, February 7, 2019 2:51 PM

0

Sign in to vote

User-1352156089 posted

Hi,

thank you for your feedback.

The above code doesn't work. While it sets the dates on page load it fails to work when it with the onSelect function.

In few words, when the page loads, the 2 textboxes populate correctly but when I try to change the dates, the second calendar doesn't meet the requirement of chanching automatically the date by adding 1 or more days.

Thanks,

Claudio

Thursday, February 7, 2019 6:03 PM

Answered by:

Jquery Date Picker Settings

Question

Answers

All replies