寻找类似Bootstrap datetimepicker的MaterializeCSS datetimepicker组件

目前MaterializeCSS官方确实没有提供原生的日期时间同选组件，你可以通过以下两种方式实现和bootstrapdatetimepicker类似的使用效果：

方案1：官方原生组件二次封装（无额外依赖） #

这是最贴合Materialize设计规范、兼容性最好的方案，只需要对官方自带的datepicker和timepicker做简单联动即可：

• 页面内放置两个相邻的输入框，分别绑定官方datepicker和timepicker实例，通过样式调整为同组输入控件，视觉上呈现为一个整体组件
• 给datepicker配置onClose回调，用户完成日期选择后自动唤起timepicker，保证选择流程连贯
• 额外设置一个隐藏输入框，在用户完成时间选择后自动拼接日期、时间的格式化值，直接用于表单提交

简单实现示例：

// 初始化日期选择器
const datePicker = M.Datepicker.init(document.querySelector('#date-input'), {
  onClose: () => {
    // 选完日期自动打开时间选择器
    timePicker.open();
  }
});
// 初始化时间选择器
const timePicker = M.Timepicker.init(document.querySelector('#time-input'), {
  onClose: () => {
    // 拼接完整值存入隐藏输入框
    const fullDatetime = `${datePicker.toString()} ${timePicker.toString()}`;
    document.querySelector('#datetime-hidden').value = fullDatetime;
  }
});

方案2：使用社区封装的集成组件 #

可以直接使用社区开发者基于MaterializeCSS风格封装的datetimepicker组件，这类组件大多已经内置了日期时间联动逻辑，开箱即用，只需要注意适配你项目内的Materialize主题变量，避免出现样式冲突即可。

注意事项 #

如果你的项目开启了MaterializeCSS原生表单校验，需要在完整日期时间值更新后手动触发对应输入框的校验事件，避免出现值已更新但校验状态未同步的问题。

内容的提问来源于stack exchange，提问作者praveen jagarlamudi