Kendo UI日历多选 [英] Kendo UI Calendar Multiselection

问题描述

Hi有没有办法让kendodatepicker允许多选？

解决方案

更新08.2016

---

您可以使用我的

演示

< h1> 旧答案

---

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

HTML：

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

CSS：

 code> .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设置为午夜，与日历中的值进行比较
 today.setHours（0，0，0，0）; 
 
 //数据源
 var selectedDates = [
 today.getTime ） -  day，
 today.getTime（），
 today.getTime（）+ day 
]; 
 
 //使用多选择的DatePicker 
 initPicker $（'＃picker'）。kendoDatePicker（），selectedDates）; 
 
 //带多选择的日历
 // initCalendar（$（＃calendar）。kendoCalendar slice（））; 
}）; 
 
 function initPicker（picker，selectedDates）{
 var isInit = false; 
 var kendoPicker = picker.data（'kendoDatePicker'）; 
 
 kendoPicker.bind（'open'，function（）{
 if（！isInit）{
 //假设相应的日历窗口小部件有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 .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 
 var cell = $（item）; 
 
 if（isDayCell（cell））{
 updateCell（cell，selectedDates）; 
} 
} ; 
} 
 
函数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） '）。文本（））; 
} 
 
 function dateFromCell（cell）{
 return new Date（convertDataValue（cell.find（'a'）。attr（'data-value'）））; 
} 
 
 //从'YYYY / MM / DD'转换，其中MM = 0..11 
 function convertDataValue（date）{
 var regex = / \ /（\d +）\ //; 
 var month = + date.match（regex）[1] + 1; 
 
 return date.replace（regex，'/'+ month +'/'）; 
} 
  

活动示例：

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/

这篇关于Kendo UI日历多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！