登录/注册

首页 › WijmoJS专区 › 求助中心 › 查看内容

金牌服务用户

61 主题	134 帖子	1393 积分

金牌服务用户

积分: 1393

5443
金币
61
主题
134
帖子

最新发帖

[已处理] 需要在时间控件上面选择一个时间的区间(最好还可以按照月份选择)

mtkj
金牌服务用户 / 发表于：2020-4-10 09:18 / 查看：2968 / 回复：1

66金币

[size=0.83em]

image.png95410460.png (30.15 KB, 下载次数: 0)

[color=rgb(153, 153, 153) !important]前天 16:43 上传

类似于上方图片去选择一个时间的范围

最佳答案

查看完整内容

你好，这个Wijmo没有原生支持，有一个类似的实现请参考：在这个示例中，替换app.js，运行后即可看到效果： https://demo.grapecity.com.cn/wi ... dar/Overview/purejs

收藏

回复

1 个回复

倒序浏览

最佳答案

最佳答案

KevinChen
论坛元老 / 发表于：2020-4-10 09:18:58 来自 2^#

你好，这个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

回复 使用道具举报