<el-date-picker v-model="ruleForm.monitorTime " format="yyyy-MM-dd HH:mm" style="width:100%"
value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
pickerOptions: {
// 时间不能大于当前时间
disabledDate: (time) => {
let str = "";
str = this.$moment(new Date()).format("HH:mm:ss");
console.log(str)
return new Date() < time.getTime()
selectableRange:'00:00:00 - '+this.$moment(new Date()).format("HH:mm:ss")
···<el-date-picker v-model="ruleForm.monitorTime " format="yyyy-MM-dd HH:mm" style="width:100%"value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions"placeholder="选择日期"></el-date-picker>pickerOptions: { //
首先，在选用 ElementUI 关于时间的选择器时，通常会设置 今天之后的时间不可选 或者 今天之前的时间不可选 等其他关于时间限制的需求。
那么参考相关文章和官方文档之后，我们可以知道，我们需要使用 picker-options 里的 disabledDate 去对其进行限制。在这里，参考的文章如下：
【ElementUI】日期选择器时间选择范围限制，根据接口灵活设置可选时间。只能选今天之前的时间，或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
同样的一句话，咋就遇到问
1、使用参数picker-options
建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差）
disabledDate ：控制只能选择今天及以后的日期
selectableRange ：控制选择的时间段。如果是今天，则时间从此刻开始，否则从0时开始
<el-date-picke...
需求：日期时间选择器需要限制不可选择当前时间之前得时间（控制到秒）
关键点：focus（使 input 获取焦点）、:picker-options（elementUi的r标签属性）
<el-form-item label="生效时间:"
prop="validDate">
<el-date-picker v-model="form.validDate"
type="datetime"
@focus="getselectableRange"
之前以为使用disabledDate 限定日期就够了，后面说需要限制在此刻之前更严谨。这里就需要更改selectableRange的值。
刚开始想使用事件监听的方式，比如 change、focus事件，但是发现不能，这里的事件是针对输入框的，而不是弹出来的 date-picker里面的输入选择框。所以使用监听他的值。
当我们日期每次变动的时候都需要去验证是否是当前日期，然后才看是否修改selectableRange的值
template 部分
<el-date-picker
plac..
<view class=tui-picker-content>
<view class=tui-picker-name>时间选择器（选择时分）</view>
<picker mode=time value={{time}} start=09:00 end=17:30 bindchange=changeTime>
<view class=tui-picker-detail>
午饭时间: {{
开始日期 dateTimePicker1为 2011-6-11
截止日期 dateTimePicker2为 2011-6-12
如果截止日期大于开始日期，则弹出错误。
//////////////////////////////////////////////
DateTime time1
记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题，
方便以后再次遇到类似问题 ， 能够快时查阅解决 ，
大家要是觉得有帮助的话 ， 可以收藏一下 ， 博主会不定时更新文章的
Popup 弹出层
DatetimePicker 时间选择
Field 输入框
Form 表单
Picker 选择器
Radio 单选框
Uploader 文件上传
List 列表
Tab 标签页
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: moment().startOf('day'),
sideBySide: true
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
defaultDate: moment().endOf('day'),
sideBySide: true
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
这段代码使用了moment.js和Bootstrap-datetimepicker插件，实现了两个datetimepicker控件，分别用于选择起始时间和结束时间，并且限制了结束时间必须晚于起始时间。其中，format属性指定了日期时间格式，defaultDate属性指定了默认日期时间，sideBySide属性指定了是否同时显示日期和时间选择器。on("dp.change")事件用于监听日期时间选择器的变化，从而动态更新另一个日期时间选择器的可选范围。
