You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.12 13:26:00