跳转到主内容
极星编程网:以代码为星,赴技术山海!

Layui日期组件laydate如何实现只选择年份和月份的范围

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,是设计如此。 基于Layui自定义内容轮播插件 基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据,本地查看会有跨域问题导致数据不能显示。 下载 真正影响业务的是你传给后端的值——应取回调函数第一个参数
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。

相关文章