Elementui 時間コントロールは、オプションの時間範囲を制限します (時間、分、秒の精度)。

Elementui 時間コントロールは、オプションの時間範囲を制限します (時間、分、秒の精度)。

Web サイドのプロジェクトを開発する場合、時間制御がよく使用されますが、過去の時間は選択できない、未来の時間は選択できないなど、任意の時間を制限することも比較的一般的な要件です。 、月、日が限定されているため、非常に簡単に解くことができます。時、分、秒まで正確であればどうなるでしょうか? 実際、これも非常に単純です。次に、私の要件を見てみましょう (私の要件は、過去の時刻は選択できず、時、分、秒まで正確でなければならないということです)。 :

//我们在vue中的data中定义一个对象，绑定给时间组件
expireTimeOption: {
    
    
   selectableRange:`${
      
      moment().format('HH:mm:SS')} - 23:59:59`,//这里是限制可选时间到时分秒
   //用当前时间减去一整天的时间，得到的就是当前时间到晚上13：59：59的区间
   disabledDate(date) {
    
    //这里是限制可选时间到年月日的
     //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
     return date.getTime() < Date.now() - 3600 * 1000 * 24;
    },
 },

このまま終わるかと思ったら、年、月、日を制限するものと、時、分、秒を制限するものがありますが、バグが発生します。朝の8時だとできません。明日の 8 時までに選択してください。これは明らかに間違っています。では、どうすれば解決できますか? 上位コード

//使用watch时间监听时间控件的值
watch: {
    
    
    'form.startTime'(selectTime) {
    
    
      const date = moment(selectTime).format('YYYY-MM-DD');
      const today = moment().format('YYYY-MM-DD');
      if (date === today){
    
    //如果选择是日期是当天
         // 先把时间控件的值赋值当前时间
        this.form.startTime = moment().format('YYYY-MM-DD HH:mm:SS')
         //然后限制时间小于此时此刻的时分秒不可选
        this.expireTimeOption.selectableRange = `${
      
      moment().format('HH:mm:SS')} - 23:59:59`
      } else {
    
    //如果选择是日期是明天或者更远的时间
        // 先把时间控件的值赋值为一天的的开始
        this.form.startTime = moment().format('YYYY-MM-DD 00:00:00')
        // 然后把时分秒的限制放开
        this.expireTimeOption.selectableRange = '00:00:00 - 23:59:59'
      }
    },
}