需要在时间控件上面选择一个时间的区间(最好还可以按照月份选择)
https://gcdn.grapecity.com.cn/data/attachment/forum/202004/08/164302mp3rx63ko3sk6bkd.pngimage.png95410460.png (30.15 KB, 下载次数: 0)下载附件前天 16:43 上传类似于上方图片 去选择一个时间的范围
你好，这个Wijmo没有原生支持，有一个类似的实现请参考：
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
const elDayMap = new WeakMap();
const selectedDaySet = new Set();
const toYmd = (d) => wijmo.Globalize.formatDate(d, 'yyyy-MM-dd');
// the calendar
const theCalendar = new input.Calendar('#theCalendar', {
value: null,
isReadOnly: true,
itemFormatter: (date, el) => elDayMap.set(el, date)
});
theCalendar.addEventListener(theCalendar.hostElement, 'click', (e) => {
const clickedDay = elDayMap.get(e.target);
if (clickedDay == null) return;
const dateString = toYmd(clickedDay);
if (selectedDaySet.has(dateString)) {
selectedDaySet.delete(dateString);
} else {
selectedDaySet.add(dateString);
}
showSelectedDateList();
theCalendar.invalidate();
});
theCalendar.formatItem.addHandler((sender, args) => {
const selected = selectedDaySet.has(toYmd(args.data));
wijmo.toggleClass(args.item, 'wj-state-selected', selected);
wijmo.setAttribute(args.item, 'aria-selected', selected);
});
//
// show the currently selected date
function showSelectedDateList() {
const el = document.querySelector('#theCalendarOutput');
el.textContent = '';
selectedDaySet.forEach((d) => {
el.textContent = el.textContent + '[' + d + '] ';
});
el.textContent = el.textContent.trim();
}
showSelectedDateList();
}
在这个示例中，替换app.js，运行后即可看到效果：
https://demo.grapecity.com.cn/wi ... dar/Overview/purejs
页:
[1]