Question

我在更改每个日期选择器时使用3个日期选择器我需要更改所有日期选择器。对于例如如果我在第一个日期选择器中选择8月10日，它应该在所有日期选择器中更改为8月1日。如果我在第二个日期选择器中更改8月10日，则应该在所有日期选择器中更改为8月10日。

这是我的代码：

<input  name="start" class="date_picker  form-control" id='from_one' type="text" />
<input class="date_picker form-control" id='from_two'  name="start" type="text"  />
<input class="date_picker form-control" name="end" type="text"  id='from_three'/>

$('.date_picker').datepicker({
  setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '-0m',
  minDate: 0,
  onSelect: function(text, dt) {     
    var secondDate = new Date($(".date_picker").datepicker("getDate"));
    var date2 = new Date(secondDate.getTime());
    date2.setDate(date2.getDate());
    $("#from_one").datepicker("setDate", date2);
    $("#from_two").datepicker("setDate", date2);
    $("#from_three").datepicker("setDate", date2);
  }
});

它正在工作但是在更改第二个日期选择器时它需要第一个日期选择器的值

这是我的演示fiddle

Answer 1

根据我的理解，你想要完成，这应该适合你。

$('.date_picker').datepicker({
  setDate: new Date(),
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
  startDate: '-0m',
  minDate: 0,
  onSelect: function(text, dt) {
    var selectedPicker = this;
    var datepickers = $(".date_picker");
    var secondDate = $(this).datepicker("getDate");
    var date2 = new Date(secondDate.getTime());
    date2.setDate(date2.getDate() + 1);

    $.each(datepickers, function(index, value) {
      if (value !== selectedPicker) {
        $(value).datepicker("setDate", date2);
      }
    })
  }
});

<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<input name="start" class="date_picker  form-control" id='from_one' data-date-format="dd/mm/yyyy" type="text" />
<input class="date_picker form-control" id='from_two' name="start" type="text" data-date-format="dd/mm/yyyy" />
<input class="date_picker form-control" name="end" type="text" id='from_three' />

在引导日期选择器中更改所有日期选择器的更改日期

1 个答案: