如何通过一个datetimepicker填充两个文本框

时间:2015-03-24 08:17:54

标签: jquery jquery-ui datetimepicker

我有两个带有日期时间类型的Texbox,我想用一个Datetimepicker填充它们。我的意思是第一个文本框是开始日期,第二个文本框是项目的结束日期,每个项目的默认期限是30天。当我通过日期时间选择器选择3/24/2015时,第一个文本框应该是2015年3月24日,第二个文本框应该是2015年4月24日。我怎么能这样做?

这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

你在找这样的东西吗?

$(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
    }
  });
});

直播示例:

    $(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" />