ElementUI DatePicker 日期选择器日期区间选择

最新推荐文章于 2024-04-01 20:01:21 发布

Rsingstarzengjx

最新推荐文章于 2024-04-01 20:01:21 发布

阅读量1.2k

点赞数

分类专栏： ElementUI

本文链接：https://blog.csdn.net/oDianZi1234567/article/details/102779383

版权

ElementUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ElementUI DatePicker 日期选择器日期区间选择

官方样例

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>

链接: link.

怎么获取日期数值？

<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>日期选择</title>
    <meta name="description" content="日期选择">
    <meta name="keywords" content="日期选择">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">

    <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
                v-model="detailDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyyMMdd"
                @change="dateChange"
                :picker-options="pickerOptions2">
        </el-date-picker>


    </div>
    <el-button :plain="true" @click="open1">查询</el-button>
    <el-button type="primary" @click="open2" icon="el-icon-search">搜索</el-button>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',

        created: function () {//在vue初始化时调用

        },
        data() {
            return {
                detailDate:'',
                startTime: '',
                endTime: '',
                pickerOptions2: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 60 * 60 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
                                picker.$emit('pick', [start, end])
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000);
                                picker.$emit('pick', [start, end])
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            dateChange(val) {
                this.startTime = val.toString().split(",")[0];
                this.endTime = val.toString().split(",")[1];
                alert("开始时间:"+this.startTime );
                alert("结束时间:"+this.endTime)
            },
        }
    })
</script>
</html>

实验结果

Rsingstarzengjx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ElementUI DatePicker 日期选择器日期区间选择

ElementUI DatePicker 日期选择器日期区间选择官方样例<template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="date"...
复制链接

扫一扫