Question

我尝试了带有多个日期的bootstrap日历选择选项。

$(function() {
  var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  $('#datepicker').datepicker({
    todayHighlight: false,
    multidate: true

  });
  $('#datepicker').datepicker('setDate', today);
  activeWeek();
  $('#datepicker').on('changeDate', function() {
    $('#my_hidden_input').val($('#datepicker').datepicker('getFormattedDate'));
  });

  function activeWeek() {
    $('.day.active').closest('tr').find('.day').addClass('active');
  }
})

通过选择值将在文本字段中显示。我无法达到以下两点。

默认情况下，今天的日期会添加到输入字段中。
我无法格式化日期值。我想在选择日期从13/12/2018到20/12/2018而不是以下格式时显示多个日期，例如 13/12/2018到20/12/2018 12 / 2018,14 / 12/2018 ..... 20/12/2018）。

Answer 1

这里发生了一些事情，所以我创建了一个冗长的示例以实现所需的结果（例如，可以重构此代码，但是如何实现所需的结果却不清楚）。

关于将其放置为默认值的第一个问题-这是基于使用setDate方法（$('#datepicker').datepicker('setDate', today);）的当前日期-由于您正在调用{{1 }} 之前，您定义setDate事件处理程序。通过将事件处理程序定义链接到datepicker本身的初始化，这将在初始加载时使用值填充输入字段。

.on('changeDate')

就所选日期的格式和结构而言，这需要做更多的工作。首先，我们可以在初始化时使用$('#datepicker').datepicker({ todayHighlight: false, multidate: true, format: "dd/mm/yyyy" }).on('changeDate', function() { ... )}; $('#datepicker').datepicker('setDate', today);选项将默认日期格式设置为所需的格式（有关实现，请参见上面的代码）：https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format

接下来，当选择了多个日期时，要在输入字段中显示一个format的字符串，您需要首先对所选日期的数组进行排序，并在每次进行其他选择时对其进行重新排序。作为您的EarliestSelectedDate to LatestSelectedDate事件处理程序一部分，下面的代码以这种方式进行操作：

更改后，检查是否选择了多个日期；如果是这样，请继续，否则只需在输入字段中显示该格式化的日期即可。
如果不止一个，请使用日期选择器的.on('changeDate')方法将所有选定日期（https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#getdates）加载到数组中
然后从最低（例如最早）日期到最高（例如最新）日期对数组进行排序。
排序后，从数组中获取第一项（例如最早的日期）并根据需要进行格式化
重复执行，但重复数组中的最后一项（例如，最新日期）
最后，将两个日期串联为一个字符串

代码：

getDates

正在工作的jsFiddle：http://jsfiddle.net/21zd0fhL/

您可以包括的重构功能包括日期格式的可重用功能（目前，它是在最早和最晚的日期直接执行），并检查每个新选择的日期是否已经在最早和最晚的日期之间（其中情况下，您无需重置输入字段值）。除非用户选择数百个日期，否则您不会注意到在每个.on('changeDate', function() { if($('#datepicker').datepicker('getDates').length > 1) { selectedDates = $('#datepicker').datepicker('getDates'); selectedDates.sort(function(a,b){ return a - b; }); var earliestDate = selectedDates[0]; earliestDate = earliestDate.getDate() + "/" + (earliestDate.getMonth()+1) + "/" + earliestDate.getFullYear(); var latestDate = selectedDates[selectedDates.length-1]; latestDate = latestDate.getDate() + "/" + (latestDate.getMonth()+1) + "/" + latestDate.getFullYear(); $('#my_hidden_input').val(earliestDate + " to " + latestDate); } else { $('#my_hidden_input').val($('#datepicker').datepicker('getFormattedDate')); } });事件上这样做都会对性能造成影响。

如何格式化引导日历值

1 个答案: