Search code examples
jqueryjquery-uidatetimepicker

how to fill two textbox via one datetimepicker


I have two Texbox with datetime type, I want to fill both of them with one Datetimepicker. I mean first textbox is start date and second textbox is end date for project, default period for each project is 30 days. when I select 3/24/2015 via datetime picker first textbox should be 3/24/2015 and second text box automatically should be 4/24/2015 . how can I do this?

this is my code :

<input type="text" onclick="displayDatePicker('start', this, 'ymd')">

Solution

  • Are you looking for something like this?

    $(function() {
      $.datepicker.setDefaults($.datepicker.regional['en']);
      $('#startdate').datepicker({
        onSelect: function(selectedDate) {
          var date = $(this).datepicker('getDate');
          $('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
          date.setDate(date.getDate() + 30); // Add 7 days
          $("#enddate").datepicker("setDate", date); // Set as default
        }
      });
      $('#enddate').datepicker({
        onSelect: function(selectedDate) {
          $('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
        }
      });
    });
    

    Live Example:

        $(function() {
              $.datepicker.setDefaults($.datepicker.regional['en']);
              $('#startdate').datepicker({onSelect: function(selectedDate) {
                    var date = $(this).datepicker('getDate');
                    $('#endDate').datepicker('option', 'minDate', date); // Reset minimum date
                    date.setDate(date.getDate() + 30); // Add 7 days
                    $("#enddate").datepicker( "setDate",  date); // Set as default
              }});
              $('#enddate').datepicker({onSelect: function(selectedDate) {
                    $('#startdate').datepicker('option', 'maxDate', $(this).datepicker('getDate')); // Reset maximum date
              }});
        });
    <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
    <input type="text" id="startdate" />
    <input type="text" id="enddate" />