как отформатировать значение календаря начальной загрузки

Question

Я попробовал загрузить календарь с несколькими датами.

http://jsfiddle.net/jdddpg3s/54/

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

При выборе значения будет отображаться текстовое поле.Я не могу набрать следующие две точки.

1. По умолчанию сегодняшняя дата добавляется в поле ввода.
2. Я не могу отформатировать значения даты.Я хочу, чтобы несколько дат отображались как 13/12/2018 до 20/12/2018 при выборе дат с 13/12/2018 по 20/12/2018 вместо следующего формата (13/12/2018,14/12/2018.....20/12/2018).

Answer 1

Здесь что-то происходит, поэтому я создал подробный пример для достижения желаемых результатов (например, этот код может быть подвергнут рефакторингу, но то, как он достигает желаемых результатов, будет не столь ясным).

ДляВаш первый вопрос о том, как получить значение по умолчанию - текущую дату, основанную на использовании вами метода setDate ($('#datepicker').datepicker('setDate', today);) - этого не происходит, потому что вы вызываете setDate до вы определяете ваш .on('changeDate') обработчик событий.Путем связывания определения обработчика события с инициализацией самого средства выбора даты, это заполнит поле ввода значением при начальной загрузке.

$('#datepicker').datepicker({
    todayHighlight: false,
    multidate: true,
    format: "dd/mm/yyyy"
  }).on('changeDate', function() {
  ...
  )};
$('#datepicker').datepicker('setDate', today);

С точки зрения формата и структуры выбранных дат, которая занимаетнемного больше работы.Во-первых, мы можем установить формат даты по умолчанию на нужный вам формат, используя опцию format при инициализации (см. Код выше для реализации): https://bootstrap -datepicker.readthedocs.io / en / latest / options.html# format

Далее, когда выбрано несколько дат, чтобы отобразить в поле ввода строку EarliestSelectedDate to LatestSelectedDate, вам необходимо сначала отсортировать массив выбранных дат и повторно отсортировать егокаждый раз делается другой выбор.Приведенный ниже код как часть вашего обработчика событий .on('changeDate') делает это следующим образом:

1. При изменении проверьте, выбрано ли более одной даты;если это так, в противном случае просто отобразите эту отформатированную дату в поле ввода.
2. Если их больше одного, используйте метод getDates DatePicker, чтобы загрузить в ваш массив все выбранные даты (https://bootstrap -datepicker.readthedocs.io/en/latest/methods.html#getdates)
3. Затем отсортируйте массив от самой низкой (например, самой ранней) даты до самой высокой (например, самой последней) даты.
4. После сортировки возьмите первый элемент из массива (например, самую раннюю дату) и отформатируйте при необходимости
5. Повторите, но с последним элементом в массиве (например, самой поздней датой)
6. Наконец, объедините двадаты в виде строки

Код:

.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'));
    }
});

Рабочая jsFiddle: http://jsfiddle.net/21zd0fhL/

Рефакторинг, который вы можете включить, - это такие вещи, как функция многократного использования для форматирования даты (прямо сейчас это выполняется непосредственно в самую раннюю и самую позднюю дату) и проверяет, находится ли каждая вновь выбранная дата уже между самой ранней и самой поздней датой (в этом случае вам не нужно будет сбрасывать значение поля ввода).Если пользователи не выберут сотни дат, вы не заметите влияния на производительность при каждом changeDate событии.