Kendo UI日历多选 | dateFromCell

本文介绍了Kendo UI日历多选的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！ Hi有没有办法让kendodatepicker允许多选？解决方案更新08.2016 您可以使用我的演示旧答案仍然没有官方方法可以在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.2016You can use my plugin to select multiple dates.DemoOld answerStill 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..11function 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日历多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！