el-date-picker 日，周 ，月，自定义日期的使用总结

效果图：
按日 按周 按月
image.pngimage.pngimage.png
自定义：
image.png

  1. <template>
  2.     <div class="date">
  3.         <div class="data-left">
  4.             <div class="time-text">时间选择</div>
  5.             <el-select
  6.                 class="date-type-picker"
  7.                 v-model="dateType"
  8.                 @change="dateTypeChange"
  9.                 placeholder="请选择类型">
  10.                 <el-option
  11.                     v-for="item in dateTypeArr"
  12.                     :key="item.name"
  13.                     :label="item.name"
  14.                     :value="item.value">
  15.                 </el-option>
  16.             </el-select>
  17.             <!--按日-->
  18.             <el-date-picker
  19.                 v-show="dateType == '0'"
  20.                 :clearable="false"
  21.                 v-model="dayValue"
  22.                 @change="changeDayValue()"
  23.                 type="date"
  24.                 value-format="timestamp"
  25.                 :picker-options="pickerOptions"
  26.                 placeholder="选择日期">
  27.             </el-date-picker>
  28.             <!--按周-->
  29.             <el-date-picker
  30.                 v-show="dateType == '1'"
  31.                 :clearable="false"
  32.                 v-model="weekValue"
  33.                 type="week"
  34.                 format="yyyy 第 WW 周"
  35.                 @change="changeWeekValue()"
  36.                 :picker-options="pickerOptions"
  37.                 placeholder="请选择周">
  38.             </el-date-picker>
  39.             <!--按月-->
  40.             <el-date-picker
  41.                 v-show="dateType == '2'"
  42.                 :clearable="false"
  43.                 v-model="monthValue"
  44.                 @change="changeMonthValue()"
  45.                 type="month"
  46.                 :picker-options="pickerOptions"
  47.                 placeholder="请选择月">
  48.             </el-date-picker>
  49.             <!--自定义-->
  50.             <el-date-picker
  51.                 v-show="dateType == '3'"
  52.                 :clearable="false"
  53.                 v-model="dataForm.createTime"
  54.                 type="daterange"
  55.                 align="right"
  56.                 size="small"
  57.                 range-separator="至"
  58.                 start-placeholder="开始日期"
  59.                 end-placeholder="结束日期"
  60.                 value-format="timestamp"
  61.                 :picker-options="pickerOptions"
  62.                 @change="changeParameter"
  63.                 :default-time="defaultTime"
  64.             >
  65.             </el-date-picker>
  66.             <div class="event-type">
  67.                 <div class="title-text">事件类型</div>
  68.                 <el-select
  69.                     v-model="dataForm.eventType"
  70.                     placeholder="请选择事件类型"
  71.                     filterable
  72.                     clearable
  73.                     @change="changeParameter">
  74.                     <el-option
  75.                         v-for="item in typeList"
  76.                         :key="item.name"
  77.                         :label="item.name"
  78.                         :value="item.type">
  79.                     </el-option>
  80.                 </el-select>
  81.             </div>
  82.         </div>
  83.         <div class="search">
  84.             <el-button size="mini" @click="statisticalEvent()">搜索</el-button>
  85.             <el-button class="m-l-15 reset-btn" size="mini"
  86.                        @click="resetForm()">重置
  87.             </el-button>
  88.         </div>
  89.     </div>
  90. </template>
  92. <script>
  93. import {eventTypeList} from "../../../api/eventProcessing";
  94. import {debounce} from "../../../utils";
  96. export default {
  97.     exeSearchname: "topSearch",
  98.     data() {
  99.         return {
  100.             dateType: '0', // 日期类型，默认为按日
  101.             dayValue: new Date().setHours(0, 0, 0, 0), // 按照日的
  102.             weekValue: '', // 按周
  103.             monthValue: '', // 按月
  104.             dateTypeArr: [
  105.                 {
  106.                     name: '按日',
  107.                     value: '0'
  108.                 },
  109.                 {
  110.                     name: '按周',
  111.                     value: '1'
  112.                 },
  113.                 {
  114.                     name: '按月',
  115.                     value: '2'
  116.                 },
  117.                 {
  118.                     name: '自定义',
  119.                     value: '3'
  120.                 }
  121.             ],
  122.             // 时间快捷选项
  123.             pickerOptions: {
  124.                 // shortcuts: [
  125.                 //     {
  126.                 //         text: "今天",
  127.                 //         onClick(picker) {
  128.                 //             const end = new Date().getTime();
  129.                 //             const start = new Date();
  130.                 //             start.setHours(0, 0, 0, 0);
  131.                 //             picker.$emit("pick", [start.setHours(0, 0, 0, 0), end]);
  132.                 //         }
  133.                 //     },
  134.                 //     {
  135.                 //         text: "昨天",
  136.                 //         onClick(picker) {
  137.                 //             const end = new Date();
  138.                 //             const start = new Date();
  139.                 //             start.setTime(start.getTime() - 3600 * 1000 * 24);
  140.                 //             end.setHours(0, 0, 0, 0);
  141.                 //             const endT = end.getTime() - 1000
  142.                 //             picker.$emit("pick", [start.setHours(0, 0, 0, 0), endT]);
  143.                 //         }
  144.                 //     },
  145.                 //     {
  146.                 //         text: '近7天',
  147.                 //         onClick(picker) {
  148.                 //             const end = new Date().getTime();
  149.                 //             const start = new Date();
  150.                 //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
  151.                 //             picker.$emit('pick', [start.setHours(0, 0, 0, 0), end]);
  152.                 //         }
  153.                 //     },
  154.                 //     {
  155.                 //         text: "最近一个月",
  156.                 //         onClick(picker) {
  157.                 //             const end = new Date().setHours(23, 59, 59, 0);
  158.                 //             const start = new Date();
  159.                 //             start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
  160.                 //             picker.$emit("pick", [start.setHours(0, 0, 0, 0), end]);
  161.                 //         }
  162.                 //     }
  163.                 // ],
  164.                 disabledDate(time) {
  165.                     return time.getTime() > new Date().setHours(23, 59, 59, 0);
  166.                 }
  167.             },
  168.             dataForm: {
  169.                 startTime: "",
  170.                 endTime: "",
  171.                 createTime: [new Date().setHours(0, 0, 0, 0), new Date().getTime()],
  172.                 eventType: "",
  173.                 reportType: 1, // 报告类型
  174.             },
  175.             typeList: [],// 事件类型选择
  176.             timeOut: ''
  177.         }
  178.     },
  179.     computed: {
  180.         defaultTime: function () {
  181.             return ["00:00:00", "23:59:59"]
  182.         }
  183.     },
  184.     destroyed() {
  185.         if (this.timeOut != '') {
  186.             clearTimeout(this.timeOut);
  187.             this.timeOut = '';
  188.         }
  189.     },
  190.     mounted() {
  191.         if (this.timeOut != '') {
  192.             clearTimeout(this.timeOut);
  193.             this.timeOut = '';
  194.             this.timeOut = setTimeout(() => {
  195.                 this.intEventTypeList()
  196.                 this.statisticalEvent()
  197.             }, 200)
  198.         } else {
  199.             this.timeOut = setTimeout(() => {
  200.                 this.intEventTypeList()
  201.                 this.statisticalEvent()
  202.             }, 200)
  203.         }
  205.     },
  206.     watch: {
  207.         '$store.state.region'() {
  208.             setTimeout(() => {
  209.                 this.$emit('exeSearch', this.dataForm)
  210.             }, 500)
  211.         },
  212.     },
  213.     methods: {
  214.         // 时间类型变化 日，周，月 恢复默认
  215.         dateTypeChange() {
  216.             // 按日
  217.             if (this.dateType === '0') {
  218.                 this.dataForm.reportType = 1;
  219.                 this.dayValue = new Date().setHours(0, 0, 0, 0);
  220.                 let tmpDay = new Date().setHours(0, 0, 0, 0);
  221.                 this.dataForm.createTime = [Number(tmpDay.getTime()), Number(tmpDay.getTime()) + 86400000 - 1]
  222.                 this.statisticalEvent();
  223.             }
  224.             // 按周
  225.             if (this.dateType === '1') {
  226.                 this.dataForm.reportType = 7;
  227.                 // 当前日期
  228.                 let tmpDate = new Date();
  229.                 let tmpTimestamp = tmpDate.getTime();
  230.                 // 当前日期的 日
  231.                 let tmpDay = tmpDate.getDay();
  232.                 // 当前周的 周一
  233.                 let tmpMonday = new Date(tmpTimestamp - (tmpDay - 1) * 60 * 60 * 24 * 1000);
  234.                 tmpMonday.setHours(0, 0, 0, 0);
  235.                 this.weekValue = tmpMonday;
  236.                 let tmpDayTimestamp = 86400000;
  237.                 // 周的开始 时间戳
  238.                 let start = tmpMonday.getTime() - tmpDayTimestamp;
  239.                 // 周的结束 时间戳
  240.                 let end = tmpMonday.getTime() + tmpDayTimestamp * 6 - 1;
  241.                 this.dataForm.createTime = [start, end]
  242.                 this.statisticalEvent();
  243.             }
  244.             // 按月
  245.             if (this.dateType === '2') {
  246.                 this.dataForm.reportType = 31;
  247.                 // 一天时间的毫秒数
  248.                 let tmpDayTimestamp = 86400000;
  249.                 // 当前日期
  250.                 let tmpDate = new Date();
  251.                 // 当前日期的日设置为 当前月的 1 号
  252.                 tmpDate.setUTCDate(1);
  253.                 // 设置 1 号的时间为 0点0分0秒0毫秒
  254.                 tmpDate.setHours(0, 0, 0, 0);
  255.                 this.monthValue = tmpDate;
  256.                 // 获取当前月的天数
  257.                 let days = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
  258.                 // 月 第一天0点的时间戳
  259.                 let monthStartTimestamp = tmpDate.getTime();
  260.                 // 月 最后一天 23:59:59 的时间戳
  261.                 let monthEndTimestamp = tmpDate.getTime() + tmpDayTimestamp * days - 1;
  262.                 // 当前月份的 开始 结束 时间戳数组
  263.                 this.dataForm.createTime = [monthStartTimestamp, monthEndTimestamp]
  264.                 this.statisticalEvent();
  265.             }
  266.             // 自定义
  267.             if (this.dateType === '3') {
  268.                 this.dataForm.reportType = 0;
  269.                 this.dataForm.createTime = [new Date().setHours(0, 0, 0, 0), new Date().getTime()];
  270.                 this.statisticalEvent();
  271.             }
  272.         },
  273.         // 按月
  274.         changeMonthValue() {
  275.             this.dataForm.reportType = 31;
  276.             let tmpDayTimestamp = 86400000;
  277.             let tmpDate = new Date(this.monthValue);
  278.             let days = new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 0).getDate();
  279.             let monthStartTimestamp = tmpDate.getTime();
  280.             let monthEndTimestamp = tmpDate.getTime() + tmpDayTimestamp * days - 1;
  281.             this.dataForm.createTime = [monthStartTimestamp, monthEndTimestamp]
  282.             this.statisticalEvent();
  283.         },
  284.         // 按周
  285.         changeWeekValue() {
  286.             this.dataForm.reportType = 7;
  287.             // 一天的毫秒数
  288.             let tmpDayTimestamp = 86400000;
  289.             // 选择的周
  290.             let tmpTimestamp = new Date(this.weekValue);
  291.             // 周的开始时间戳
  292.             let start = tmpTimestamp.getTime() - tmpDayTimestamp;
  293.             // 周到结束时间戳
  294.             let end = tmpTimestamp.getTime() + tmpDayTimestamp * 6 - 1;
  295.             this.dataForm.createTime = [start, end]
  296.             this.statisticalEvent();
  297.         },
  298.         // 按日
  299.         changeDayValue() {
  300.             this.dataForm.reportType = 1;
  301.             this.dataForm.createTime = [Number(this.dayValue), Number(this.dayValue) + 86400000 - 1]
  302.             this.statisticalEvent();
  303.         },
  304.         intEventTypeList() {
  305.             eventTypeList().then(res => {
  306.                 if (res.code === 0) {
  307.                     this.typeList = []
  308.                     res.data.forEach(item => {
  309.                         this.typeList.push(
  310.                             {
  311.                                 name: item.signName,
  312.                                 type: item.signType
  313.                             }
  314.                         )
  315.                     })
  316.                 }
  317.             })
  318.         },
  319.         // 选择时间，或选择时间类型后 调用
  320.         changeParameter() {
  321.             this.dataForm.time = ' ';
  322.             // 选择时间，点击确定
  323.             this.dataForm.startTime = String(this.dataForm.createTime[0]);
  324.             this.dataForm.endTime = String(this.dataForm.createTime[1]);
  325.             this.statisticalEvent()
  326.         },
  327.         // 重置
  328.         resetForm() {
  329.             this.$nextTick(() => {
  330.                 //取消选中样式
  331.                 this.dataForm.time = "0";
  332.                 this.dataForm.sensorType = '';
  333.                 this.dataForm.startTime = '';
  334.                 this.dataForm.endTime = '';
  335.                 this.dataForm.eventType = '';
  336.                 this.dataForm.createTime = [new Date().setHours(0, 0, 0, 0), new Date().getTime()];
  337.                 this.dateType = '0'; // 默认按日
  338.                 this.dayValue = new Date().setHours(0, 0, 0, 0); // 默认为当天
  339.                 this.dataForm.reportType = 1; // 报告类型默认
  340.                 // 重置后，按照默认的时间 查询
  341.                 this.statisticalEvent()
  342.             });
  343.         },
  345.         statisticalEvent: debounce(function () {
  346.             this.doStatisticalEvent();
  347.         }, 300, true),
  349.         //初始化查询事件
  350.         doStatisticalEvent() {
  351.             this.dataForm.startTime = String(this.dataForm.createTime[0]);
  352.             this.dataForm.endTime = String(this.dataForm.createTime[1]);
  353.             let sub = this.dataForm.endTime - this.dataForm.startTime
  355.             if (sub > 2678400000) {// 一天的时间戳为86400000
  356.                 this.$message.warning('选择的日期不能超过31天！')
  357.                 this.dataForm.createTime = [new Date().setHours(0, 0, 0, 0), new Date().getTime()];
  358.                 this.dataForm.time = "0";
  359.                 this.dataForm.sensorType = '';
  360.                 this.dataForm.startTime = '';
  361.                 this.dataForm.endTime = '';
  362.                 return
  363.             }
  365.             this.$emit('exeSearch', this.dataForm)
  366.         }
  367.     }
  368. }
  369. </script>
  371. <style lang="less" scoped>
  372. .date {
  373.     display: flex;
  374.     flex-direction: row;
  375.     justify-content: center;
  376.     align-items: center;
  377.     width: 100%;
  378.     background: @background4;
  379.     height: calc(var(--num80) * var(--num));
  380.     line-height: calc(var(--num80) * var(--num));
  381. }
  383. .data-left {
  384.     height: 100%;
  385.     width: 80%;
  386.     display: flex;
  387.     flex-direction: row;
  388.     justify-content: flex-start;
  389.     align-items: center;
  390. }
  392. .date-picker {
  393.     margin-left: calc(var(--num24) * var(--num));
  394. }
  396. .date-type-picker {
  397.     width: calc(var(--num98) * var(--num));
  398.     margin: 0 calc(var(--num8) * var(--num));
  399. }
  401. .time-text {
  402.     font-size: calc(var(--num14) * var(--num));
  403.     color: @whiteText1;
  404.     margin-left: calc(var(--num24) * var(--num));
  405. }
  407. .title-text {
  408.     font-size: calc(var(--num14) * var(--num));
  409.     color: @whiteText1;
  410.     margin-right: calc(var(--num24) * var(--num));
  411. }
  413. .event-type {
  414.     height: 100%;
  415.     margin-left: calc(var(--num42) * var(--num));
  416.     display: flex;
  417.     flex-direction: row;
  418. }
  420. .search {
  421.     display: flex;
  422.     flex-direction: row;
  423.     justify-content: flex-end;
  424.     align-items: center;
  425.     height: 100%;
  426.     width: 20%;
  427. }
  429. .reset-btn {
  430.     margin-right: calc(var(--num24) * var(--num));
  431.     border: calc(var(--num1) * var(--num)) solid @lucencyPrimary4 !important;
  432.     background: @background3 !important;
  433.     color: @whiteText1;
  434. }
  436. .reset-btn:hover {
  437.     border: calc(var(--num1) * var(--num)) solid @lucencyPrimary2 !important;
  438.     background: @background3 !important;
  439.     color: @primary3 !important;
  440. }
  441. </style>
  • 获取当天0点时间戳
  1. new Date(new Date().toLocaleDateString()).getTime()
  • value-format是时间处理格式
  1. value-format="yyyy-MM-dd" //2018-12-27
  2. value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
  3. value-format="timestamp" // 1483326245000 时间戳
  • 日期date字符串格式转换为时间戳
  1. new Date("2021-05-07 12:25:45").getTime().toString();

DatePicker的基本操作

type=”daterange” 时， 结束的时间为当日的 0 点，应该为结束日期的 23：59：59秒，
解决方法为 ： 添加 :default-time=”defaultTime”

  1. <el-date-picker
  2. style="width:178px"
  3. size="mini"
  4. v-model="addform.time"
  5. type="date"
  6. :default-time="defaultTime"
  7. format="yyyy-MM-dd HH:mm:ss"
  8. :picker-options="pickerOptions0"
  9. placeholder="选择日期">
  10.   </el-date-picker>
  12. <script>
  13.   data() {
  14.   return {
  15.     //默认日期 当天0点-当前时间 时间戳
  16.     addform: {
  17.       startTime: new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
  18.       endTime: new Date().getTime(),
  19.       time: [new Date(new Date(new Date().setHours(0, 0, 0, 0))).getTime(), new Date().getTime()],
  20.     },
  21.     // 时间快捷选项
  22.     pickerOptions: {
  23.       shortcuts: [
  24.         {
  25.           text: "今天",
  26.           onClick(picker) {
  27.             const end = new Date();
  28.             const start = new Date();
  29.             //0点到当前时间   start.setHours(0, 0, 0, 0);
  30.             start.setTime(new Date(new Date().toLocaleDateString()).getTime() );
  31.             picker.$emit("pick", [start, end]);
  32.           }
  33.         },
  34.         {
  35.           text: "昨天",
  36.           onClick(picker) {
  37.             const end = new Date().setHours(0, 0, 0, 0);
  38.             const start = new Date();
  39.             start.setTime(start.getTime() - 3600 * 1000 * 24);
  40.             const endT = end.getTime() - 1000
  41.             picker.$emit("pick", [start.setHours(0, 0, 0, 0), endT]);
  42.           }
  43.         },
  45.         {
  46.           text: "最近一个月",
  47.           onClick(picker) {
  48.               const end = new Date().setHours(23, 59, 59, 0);
  49.               const start = new Date();
  50.               start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
  51.               picker.$emit("pick", [start.setHours(0, 0, 0, 0), end]);
  52.           }
  53.         }
  54.       ]
  55.     },
  56.     disabledDate(time) { // 不可选择的时间，设置为当天的 23:59:59 
  57.       return time.getTime() > new Date().setHours(23, 59, 59, 0);
  58.     }
  59.     //选择今天以及之后的日期
  60.     pickerOptions0: {
  61.       disabledDate(time) {
  62.         return time.getTime() < Date.now() - 8.64e7;
  63.       }
  64.     },
  65.     //如果没有后面的-8.64e7就是选择除了今天之后的日期
  66.     pickerOptions1: {
  67.       disabledDate(time) {
  68.         return time.getTime() < Date.now();
  69.       },
  70.     },
  71.     // 不能选择当天之前的日期和两天之后的日期
  72.     pickerOptions2: {
  73.       disabledDate(time) {
  74.         // 当前时间，并设置分钟、秒为 0
  75.         let tmpDate = new Date();
  76.         tmpDate.setHours(0);
  77.         tmpDate.setMinutes(0);
  78.         tmpDate.setSeconds(0);
  79.         let startDate = tmpDate.getTime()
  80.         let endDate = startDate + 3600000 * 24 * 2; // 两天的时间
  81.         return (time.getTime() < new Date().getTime() - 8.64e7 ||
  82.                 time.getTime() > endDate);
  83.       }
  84.     },
  85.   }
  86. },
  87. computed: {
  88.   defaultTime: function () {
  89.       return ["00:00:00", "23:59:59"]
  90.   }
  91. },
  92. <script>

时间表单验证不超过多少小时

  1. const validatecreateTime = (rule, value, callback) => {
  2.   if (value) {
  3.     const utc = value[1] - value[0];
  4.     const time = utc / (60 * 60 * 1000);
  5.     if (time > 2) {
  6.       callback(new Error("时间选择跨度不能超过2小时")); //没有验证通过
  7.     } else {
  8.       callback(); //验证通过
  9.     }
  10.   } else {
  11.     callback(new Error("请选择时间")); //没有验证通过
  12.   }
  13. };

日期组件自定义当天有数据的样式标记

  • 引入moment时间日期处理插件
  1. import moment from "moment";
  2. data(){
  3.     return{
  4.          existDate: ["2021-06-21"],
  5.          pickerOptions: {
  6.             cellClassName: time => {
  7.               if (this.existDate.includes(this.formatDate(time))) {
  8.                 return "red";
  9.               }
  10.             }
  11.           },
  12.     }
  14. }
  15. <style>
  16. .red {
  17.   background: blue;
  18.   color: white;
  19.   border-radius: 50%;
  20. }
  21. </style>

获取指定第几天的时间戳

  • 0 当天 fun_date(0)
  • -7 最近一周(当前时间到前7天的时间) fun_date(7)
  • -30 最近一个月 fun_date(30)
  1.      //获取指定第几天的时间戳 参数：正数是几天后  负数是几天前
  2.      fun_date(num) {
  3.          var date1 = new Date();
  4.          //今天时间
  5.          var time1 = new Date().getTime();
  6.          var date2 = new Date(date1);
  7.          date2.setDate(date1.getDate() + num);
  8.          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
  9.          var time2 = new Date(date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate()).getTime();
  10.          //判断time1 和 time2 的大小
  11.          if (time1 - time2 <= 0) {
  12.              this.queryItem.createTime = [time1, time2]
  13.          } else {
  14.              this.queryItem.createTime = [time2, time1]
  15.          }
  16.      }

时间戳转换 time(时间戳)

  1.    let timeFormatter = function(time){
  2.         if(time){
  3.             var date = new Date(time)//把定义的时间赋值进来进行下面的转换
  4.             var year = date.getFullYear();
  5.             var month = (date.getMonth() + 1).toString().padStart(2, "0");
  6.             var day = date.getDate().toString().padStart(2, "0");
  7.             var hour = date.getHours().toString().padStart(2, "0");
  8.             var minute = date.getMinutes().toString().padStart(2, "0");
  9.             var second = date.getSeconds().toString().padStart(2, "0");
  10.             return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
  11.         }else{
  12.             return '';
  13.         }
  14.     }

时间转换为时间戳

  1. var data_1 = new Date('2021-09-06 16:00:00')
  2. var time1 = data_1.getTime();//1630915200000

时间戳转换成指定形式

  1.    Date.prototype.format = function(fmt) {
  2.         var o = {
  3.             "M+" : this.getMonth()+1,                 //月份
  4.             "d+" : this.getDate(),                    //日
  5.             "h+" : this.getHours(),                   //小时
  6.             "m+" : this.getMinutes(),                 //分
  7.             "s+" : this.getSeconds(),                 //秒
  8.             "q+" : Math.floor((this.getMonth()+3)/3), //季度
  9.             "S"  : this.getMilliseconds()             //毫秒
  10.         };
  11.         if(/(y+)/.test(fmt)) {
  12.             fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  13.         }
  14.         for(var k in o) {
  15.             if(new RegExp("("+ k +")").test(fmt)){
  16.                 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  17.             }
  18.         }
  19.         return fmt;
  20.     };
  21.     var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");//当前时间转换成指定格式
  22.     var time2 = new Date(1522207388000).format("yyyy-MM-dd hh:mm:ss");//时间戳转换成成指定格式
  24.     var oldTime = (new Date()).getTime();// 指定日期转换为时间戳，再转为指定格式
  25.     var curTime = new Date(oldTime).format("yyyy-MM-dd");//2014-12-25
  26.     var aa = new Date(oldTime).format("yyyyMMdd");//20141225

datePicker类型为周/月的时候获取开始时间和结束时间

  • 为周(获取周一到周日的时间段)
  • 为月(获取月初到月末的时间段)
  1.  <!--时间检索 按天-->
  2.  <span v-if="timeType == 'day'">
  3.      <el-form-item  >
  4.          <el-date-picker
  5.                v-model="queryItem.day"
  6.                type="date"
  7.                value-format="timestamp"
  8.                :picker-options="pickerOptions0"
  9.                placeholder="选择日期">
  10.          </el-date-picker>
  11.      </el-form-item>
  12.  </span>
  13.  <!--时间检索 按周-->
  14.  <span v-if="timeType == 'week'">
  15.      <el-form-item >
  16.            <el-date-picker
  17.                    v-model="queryItem.week"
  18.                    type="week"
  19.                    format="yyyy 第 WW 周"
  20.                    @change="getWeek"
  21.                    placeholder="选择周">
  22.            </el-date-picker>
  23.      </el-form-item>
  24.  </span>
  25.  <!--时间检索 按月-->
  26.  <span v-if="timeType == 'month'">
  27.      <el-form-item  >
  28.          <el-date-picker
  29.                  v-model="queryItem.month"
  30.                  type="month"
  31.                  @change="getMonth"
  32.                  placeholder="选择月">
  33.          </el-date-picker>
  34.      </el-form-item>
  35.  </span>
  • js
  1.  //分析周
  2.  getWeek(val){
  3.      var weekTime = this.getWeeklyStartTimeAndEndTime(val);
  4.      this.dateObj.startTime = weekTime.startTime;
  5.      this.dateObj.endTime = weekTime.endTime;
  6.  },
  7.  //分析月
  8.  getMonth(val){
  9.      let monthTime = this.getMonthlyStartTimeAndEndTime(val);
  10.      this.dateObj.startTime = monthTime.startTime;
  11.      this.dateObj.endTime = monthTime.endTime;
  12.  },
  13.  /*
  14.  * 获取周的开始和结束时间
  15.  * */
  16.  getWeeklyStartTimeAndEndTime(val) {
  17.      let temp = {};
  18.      // 标准时间，转为时间戳,
  19.      // elementUi中el-date-picker type是周时，返回的是周一
  20.      let timeStamp = val.getTime();
  21.      // 周的开始时间
  22.      temp.startTime = timeStamp - 24 * 60 * 60 * 1000;
  23.      // 周的结束时间
  24.      temp.endTime = timeStamp + (24 * 60 * 60 * 1000) * 6 - 1000;
  25.      return temp
  26.  },
  27.  /*
  28.  * 获取某一年某一月的开始时间和结束时间
  29.  * */
  30.  getMonthlyStartTimeAndEndTime( val) {
  31.      let temp = {};
  32.      // 标准时间，转为时间戳
  33.      // elementUi中el-date-picker type是月时，返回的是选择月的第一天
  34.      let timeStamp = val.getTime();
  35.      let year =  moment(timeStamp).utcOffset(480).format("YYYY");
  36.      let month = moment(timeStamp).utcOffset(480).format("MM");
  37.      // 月开始时间
  38.      temp.startTime = timeStamp;
  39.      // 月结束时间
  40.      temp.endTime = timeStamp + (24 * 60 * 60 * 1000) * this.getMonthDays(year, month) - 1000;
  41.      return temp;
  42.  },
  43.  // 获取某一年某一月的天数
  44.  getMonthDays(year, month) {
  45.      let date = new Date(year, month, 0)
  46.      return date.getDate()
  47.  }

el-date-picker type为datetime时只能限制未来时间不可选但是限制不了时分秒

  • type为datetimerange的没问题 可限制到十分秒
  • 只能通过change时间强行改值 超出当前时间默认当前最新时间
  1. <el-date-picker
  2.         style="width: 100%"
  3.         :clearable="false"
  4.         placeholder="选择日期时间"
  5.         v-model="confirmForm.confirmTime"
  6.         :picker-options="pickerBeginDateBefore"
  7.         type="datetime"
  8.         value-format="timestamp"
  9.         @change="handchangeDate"
  10.        >
  11. </el-date-picker>
  13. <script>
  14.     import moment from 'moment'
  15.      export default {
  16.             data(){
  17.                 return{
  18.                     confirmForm:{
  19.                         confirmTime:''
  20.                     },
  21.                     //限制未来时间不可选 但是十分秒仍然可以选
  22.                     pickerBeginDateBefore: {
  23.                         disabledDate(time) {
  24.                             return time.getTime() > Date.now();
  25.                         }
  26.                     },
  27.                 }
  28.             },
  29.             methods:{
  30.                handchangeDate() {
  31.                    let startAt = new Date(this.confirmForm.confirmTime) * 1000 / 1000;
  32.                     //如果选择的时间大于当前本地时间则赋值当前本地时间
  33.                    if (startAt > Date.now()) {
  34.                        this.confirmForm.confirmTime = new Date();
  35.                    }
  36.                },
  37.             }
  38.         }
  39. </script>

选择时间，不能跨月

  1. import moment from 'moment'; // 引入插件
  3. let currentDate = ''; // 当前选中的日期
  5. let disabledDate = time => { // 
  6.   //禁用日期
  7.   let d = new Date(currentDate); // 获取当前选择时间
  8.   let year = d.getFullYear(); // 获取当前 - 年
  9.   let month = d.getMonth() + 1; // 获取当前 - 月
  10.   let day = new Date(year, month, 0).getDate(); // 获取本月天数(获取下一个月的0日即前一月的最后一日)
  11.   month = month > 9 ? month : '0' + month; // 优化月格式
  12.   day = day > 9 ? day : '0' + day; // 优化日格式
  13.   let startDay = `${year}-${month}-01 00:00:00`; // 当月第一天
  14.   let endDay = `${year}-${month}-${day} 23:59:59`; // 当月最后一天
  15.   let startTime = new Date(startDay).getTime(); // 第一天时间戳
  16.   let endTime = new Date(endDay).getTime(); // 最后一天时间戳
  17.   let cutTime = new Date(moment().format('YYYY-MM-DD 23:59:59')).getTime(); // 当前时间戳 
  18.   if (currentDate !== '') { // 是否选择日期，选择日期，禁用掉不符合要求的时间
  19.     return (
  20.       time.getTime() < startTime ||
  21.       time.getTime() > endTime ||
  22.       time.getTime() > cutTime
  23.     );
  24.   }
  25.   return time.getTime() > cutTime; // 否则禁用大于当前时间的时间
  26. };
  28. let onPick = ({ minDate, maxDate }) => { // 选择时间事件
  29.   currentDate = minDate.getTime();
  30.   if (maxDate) {
  31.     currentDate = '';
  32.   }
  33. };
  35. let pickerOption = {
  36.   disabledDate,
  37.   onPick,
  38. };
  40. export default pickerOption;