Vue.js：使用v-model获取日期选择器值_vue获取<input type="date">-CSDN博客

本文链接：https://blog.csdn.net/weixin_55804957/article/details/128651943

使用v-model获取时间选择器值

此案例主要是通过使用v-model将input元素（date日期选择器）与Vue实例的数据属性（myDateFrom和myDateTo）绑定，实现获取日期选择器值的效果。当在浏览器中显示页面时，在“期待发货日期”和“期待收货日期”；“两个日期选择器中设置新的日期，如果设置正确，则提示：“日期设置完毕，请注意物流状态！，具体效果图如下图所示，如果设置的“期待发货日期：”晚于“期待收货日期：”则做出提示”发货日期不晚于收获日期！“，效果图见下面图二所示。

相关代码的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-model获取日期选择器值</title>
  <script src="../BLBL笔记/lib/vue.min.js ."></script>
</head>
<body>
  <center>
    <div id="app">
      <p>
        期待发货日期：<input type="date" v-model = "myDateFrom"
                v-on:change = "onDateChange()" />
      </p>
      <p>
        期待收获日期：<input type="date" v-model = "myDateTo"
                v-on:change = "onDateChange()" />
      </p>
      <h3>{{myText}}</h3>
    </div>
  </center>
  <script>
    new Vue({
      el:"#app",
      data: {
        myDateFrom:"2022-1-11",
        myDateTo:"2022-1-22",
        myText:""
      },
      methods:{
        onDateChange() {
          this.myText = "日期设置完毕，请注意物流状态！";
          var myFrom = new Date(this.myDateFrom);
          var myTo = new Date(this.myDateTo);
          if(myTo < myFrom) {
            this.myText = "发货日期不能晚于收货日期！"
          }
        }
      }
    })
  </script>
</body>
</html>