laydate配置只选年月需设type: 'month'并配合format: 'yyyy-MM',初始化value须为合法日期如"2024-05-01",返回值按format输出纯年月字符串。
laydate 怎么配置成只选年月(不显示日)
laydate 默认是完整日期选择器,要变成「年月选择」,核心是设置 type: 'month',而不是 type: 'date'。注意:这不是隐藏日面板,而是切换为原生的年月模式——它会自动收起日期表格,只展示年份和月份选择器。
常见错误是试图用 format: 'yyyy-MM' 配合 type: 'date',结果日部分仍可点、值也带 01,根本没禁掉日逻辑。
-
type: 'month'是唯一正确入口,此时format只能是'yyyy-MM'或'yyyy年M月'等不含日的格式,否则控制台会警告且渲染异常 - 如果设了
range: true,type: 'month'依然生效,但范围选择逻辑会按「年月」粒度计算(比如2023-05到2024-02),不是按天折算 - 别在
type: 'month'下配calendar: true或showBottom: false这类 date 模式专属参数,它们会被忽略或引发不可预期行为
实现年月范围选择(start/end 两个输入框联动)
laydate 的 range 模式在 type: 'month' 下可用,但必须用两个独立实例绑定到不同 input,并手动同步 min/max 范围。官方文档没明说,但实测发现:单个实例开启 range: true + type: 'month' 会失效(只触发一次选择)。
正确做法是初始化两个 laydate 实例,用 done 回调互相约束:
laydate.render({
elem: '#start',
type: 'month',
format: 'yyyy-MM',
done: function(value, date, endDate) {
// 限制结束时间不能早于开始时间
endConfig.min = value;
laydate.render(endConfig);
}
});
const endConfig = {
elem: '#end',
type: 'month',
format: 'yyyy-MM',
done: function(value, date, endDate) {
// 限制开始时间不能晚于结束时间
startConfig.max = value;
laydate.render(startConfig);
}
};
// 注意:startConfig 和 endConfig 需提前定义并引用对方
关键点:每次选择后都要重新 laydate.render() 对方实例,否则 min/max 不生效。不要试图用 setMin()/setMax() 方法——这些是旧版 API,在 v2.8+ 中已移除。
为什么选中后 input 值多了 “01”(如 “2023-05-01”)
这是 laydate 内部机制导致的:即使 type: 'month',返回的 value 参数默认仍是完整日期字符串(补零到当月第一天)。你看到的 2023-05-01 不是 bug,是设计如此。
- 真正影响业务的是你传给后端的值——应取回调函数第一个参数
value,它严格按format输出(比如设了format: 'yyyy-MM',value就是"2023-05") - 第二个参数
date是原始 Date 对象,它确实包含日(默认 1),但你不该直接用它生成字符串 - 如果 input 框里显示了
-01,说明你把date对象转成了字符串,或者没配对format,检查是否漏写了format配置项
兼容性与隐藏坑
v2.8+ 版本才稳定支持 type: 'month' 的 range 联动,v2.6 及更早版本在 range 下会卡死或无法关闭面板。如果你用的是 CDN 引入,务必确认链接指向最新版(如 https://unpkg.com/layui@2.9.12/dist/layui.js)。
另一个容易被忽略的点:trigger 事件绑定在 input 上时,type: 'month' 的点击区域比 date 模式小,如果 input 外层有 padding 或 margin,可能导致点不到触发图标。建议统一用 position: 'absolute' 定位 trigger 元素,或直接让 input 自身足够宽高。
最后提醒:laydate 不提供「仅年份选择」模式(即只有年下拉),如果需求是纯年份,得自己封装 select 或用其他组件,别硬改 laydate。











