更新 08.2016

您可以使用我的

演示

旧答案

仍然没有官方的方法在 DatePicker 中选择多个日期.但是，借助 jQuery，您可以实现此功能.

HTML:

<tr><td style="vertical-align: initial; padding-right: 100px;"><input id="picker"/></td><td><div id="日历"></div></td></tr>

CSS:

.k-state-selected {背景色:透明；边框颜色:透明；背景图像:无；}td.k-state-focused.k-state-selected {框阴影:无；}.k-状态选择>.k-链接{颜色:黑色;}.selected {背景颜色:#F35800；边框颜色:#F85A00；背景图像:无，线性渐变(到底部，rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0) 100%)；}.selected >.k-链接{颜色:#FFF；}

JS:

$(function() {无功日 = 86400000；今天无功 = 新日期();//时间设置为午夜，以便与日历中的值进行正确比较今天.setHours(0, 0, 0, 0);//数据源var selectedDates = [today.getTime() - 天，今天.getTime(),今天.getTime() + 天];//带多选的DatePickerinitPicker($('#picker').kendoDatePicker(), selectedDates);//多选日历//initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());});函数 initPicker(picker, selectedDates) {var isInit = false;var kendoPicker = picker.data('kendoDatePicker');kendoPicker.bind('open', function() {如果(！isInit){//假设相应的日历小部件具有 id 'picker_dateview'var calendar = $('#' + picker.attr('id') + '_dateview > .k-calendar');initCalendar(日历，selectedDates，函数(){updatePicker(picker, selectedDates);});isInit = true;}});picker.on('输入改变模糊', function() {updatePicker(picker, selectedDates);});updatePicker(picker, selectedDates);}功能 initCalendar(日历，selectedDates，onUpdate){var kendoCalendar = calendar.data('kendoCalendar');kendoCalendar.bind('导航', function() {设置超时(功能(){更新日历(日历，选定日期)；}, 0);});更新日历(日历，选定日期)；calendar.on('click', function(event) {var cell = $(event.target).closest('td');var isClickedOnDayCell = cell.length !== 0 &&isDayCell(单元格);如果(isClickedOnDayCell){var date = dateFromCell(cell).getTime();var isDateAlreadySelected = selectedDates.some(function(selected) {返回选定的 === 日期；});如果(isDateAlreadySelected){selectedDates.splice(selectedDates.indexOf(date), 1);} 别的 {selectedDates.push(date);}更新单元格(单元格，选定日期)；如果(onUpdate ！== 未定义){更新()；}}});}功能更新选择器(选择器，selectedDates){var dateString = selectedDates.sort().reduce(function(acc, selected, index) {var date = new Date(selected);var formattedDate = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();return acc + formattedDate + (index === (selectedDates.length - 1) ? '' : ', ');}, '');选择器.val(datesString);}功能更新日历(日历，selectedDates){calendar.find('td > a').parent().each(function(i, item) {var cell = $(item);如果(isDayCell(单元格)){更新单元格(单元格，选定日期)；}});}功能更新单元格(单元格，selectedDates){var isCellSelected = selectedDates.some(function(selected) {返回选定的 === dateFromCell(cell).getTime();});如果(isCellSelected){cell.addClass('选中');} 别的 {cell.removeClass('选中');}}函数 isDayCell(cell) {return/^d{1,2}$/.test(cell.find('a').text());}函数 dateFromCell(cell) {return new Date(convertDataValue(cell.find('a').attr('data-value')));}//从'YYYY/MM/DD'转换，其中MM = 0..11函数转换数据值(日期){var regex =//(d+)//;var 月份 = +date.match(regex)[1] + 1;return date.replace(regex, '/' + 月份 + '/');}

实例:

https://jsfiddle.net/iyegoroff/a8ma6a1j/

Hi is there a way to make the kendodatepicker allow multiselect? so select more than one date and have them all stay highlighted?

Update 08.2016

---

You can use my plugin to select multiple dates.

Demo

Old answer

---

Still there is no official way to select multiple dates in DatePicker. However, with some help of jQuery you can achieve this functionality.

HTML:

<table>
  <tr>
    <td style="vertical-align: initial; padding-right: 100px;">
      <input id="picker" />
    </td>
    <td>
      <div id="calendar"></div>
    </td>
  </tr>
</table>

CSS:

.k-state-selected {
  background-color: transparent;
  border-color: transparent;
  background-image: none;
}

td.k-state-focused.k-state-selected {
  box-shadow: none;
}

.k-state-selected > .k-link {
  color: black;
}

.selected {
  background-color: #F35800;
  border-color: #F85A00;
  background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0) 100%);
}

.selected > .k-link {
  color: #FFF;
}

JS:

$(function() {
  var day = 86400000;
  var today = new Date();
  //time is set to midnight for correct comparison with values from calendar
  today.setHours(0, 0, 0, 0);

  //data source
  var selectedDates = [
    today.getTime() - day,
    today.getTime(),
    today.getTime() + day
  ];

  //DatePicker with multiselection
  initPicker($('#picker').kendoDatePicker(), selectedDates);

  //Calendar with multiselection
  //initCalendar($("#calendar").kendoCalendar(), selectedDates.slice());
});

function initPicker(picker, selectedDates) {
  var isInit = false;
  var kendoPicker = picker.data('kendoDatePicker');

  kendoPicker.bind('open', function() {
    if (!isInit) {
      //assuming that corresponding calendar widget has id 'picker_dateview'
      var calendar = $('#' + picker.attr('id') + '_dateview > .k-calendar');

      initCalendar(calendar, selectedDates, function() {
        updatePicker(picker, selectedDates);
      });

      isInit = true;
    }
  });

  picker.on('input change blur', function() {
    updatePicker(picker, selectedDates);
  });

  updatePicker(picker, selectedDates);
}

function initCalendar(calendar, selectedDates, onUpdate) {
  var kendoCalendar = calendar.data('kendoCalendar');

  kendoCalendar.bind('navigate', function() {
    setTimeout(function() {
      updateCalendar(calendar, selectedDates);
    }, 0);
  });

  updateCalendar(calendar, selectedDates);

  calendar.on('click', function(event) {
    var cell = $(event.target).closest('td');
    var isClickedOnDayCell = cell.length !== 0 && isDayCell(cell);

    if (isClickedOnDayCell) {
      var date = dateFromCell(cell).getTime();
      var isDateAlreadySelected = selectedDates.some(function(selected) {
        return selected === date;
      });

      if (isDateAlreadySelected) {
        selectedDates.splice(selectedDates.indexOf(date), 1);

      } else {
        selectedDates.push(date);
      }

      updateCell(cell, selectedDates);

      if (onUpdate !== undefined) {
        onUpdate();
      }
    }
  });
}

function updatePicker(picker, selectedDates) {
  var datesString = selectedDates.sort().reduce(function(acc, selected, index) {
    var date = new Date(selected);
    var formattedDate = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

    return acc + formattedDate + (index === (selectedDates.length - 1) ? '' : ', ');
  }, '');

  picker.val(datesString);
}

function updateCalendar(calendar, selectedDates) {
  calendar.find('td > a').parent().each(function(i, item) {
    var cell = $(item);

    if (isDayCell(cell)) {
      updateCell(cell, selectedDates);
    }
  });
}

function updateCell(cell, selectedDates) {
  var isCellSelected = selectedDates.some(function(selected) {
    return selected === dateFromCell(cell).getTime();
  });

  if (isCellSelected) {
    cell.addClass('selected');

  } else {
    cell.removeClass('selected');
  }
}

function isDayCell(cell) {
  return /^d{1,2}$/.test(cell.find('a').text());
}

function dateFromCell(cell) {
  return new Date(convertDataValue(cell.find('a').attr('data-value')));
}

//convert from 'YYYY/MM/DD', where MM = 0..11
function convertDataValue(date) {
  var regex = //(d+)//;
  var month = +date.match(regex)[1] + 1;

  return date.replace(regex, '/' + month + '/');
}

Live example:

https://jsfiddle.net/iyegoroff/a8ma6a1j/