Rome DateTimePicker如何设置日历弹窗的初始显示年份?
解决Rome DateTimePicker弹窗初始显示指定年份(输入框为空)的方法
要实现弹窗打开时默认显示当前日期往前推40年的日历视图,同时保持输入框为空,无需使用会填充输入框的initialValue,可通过Rome实例的goto方法结合弹窗显示事件实现:
步骤1:初始化Rome组件(不设置initialValue)
正常初始化DateTimePicker,确保输入框为空:
const dpDateOfBirth = document.getElementById('dpDateOfBirth'); const romePicker = rome(dpDateOfBirth, { time: false, weekStart: 1, inputFormat: "DD/MM/YYYY", });
步骤2:计算目标日期
用moment.js计算当前日期往前推40年的日期:
const targetCalendarDate = moment().subtract(40, 'years');
步骤3:监听弹窗显示事件,跳转日历视图
通过show事件监听弹窗打开动作,调用goto方法将日历视图定位到目标日期:
romePicker.on('show', () => { romePicker.goto(targetCalendarDate.toDate()); });
设置完成后,输入框始终为空,每次打开日历弹窗时,都会自动定位到当前日期往前推40年的月份视图。
内容的提问来源于stack exchange,提问作者midnight007
相关产品推荐
相关产品推荐

