由于用到了pikaday自定义选择日期插件，使用方法

简述

pikadiy是一款轻量级的时间选择插件，在JavaScript中可根据自身需求来使用，以下就是效果，以及使用方法。
本文建立在Vue框架中。

安装

使用pikaday需要通过引入css和js来支持，可以在我的资源里下载
也可以通过CDN加载

// CDN

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

同时建议把汉化插件也加载

// 汉化支持
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>

到这里就可以开始了。

配置

创建input来接受日期数据

// A code block
<input type="text" ref="end" placeholder="end" class="inputs" id="end" readonly>

mounted:function(){
			var that = this;
		    var i18n = { // 需要在程序中进行定义，才可以进行汉化
		            previousMonth : '上个月',
		            nextMonth   : '下个月',
		            months      : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		            weekdays    : ['周日','周一','周二','周三','周四','周五','周六'],
		            weekdaysShort : ['日','一','二','三','四','五','六']
		          }
		
		    var picker = new Pikaday({
		      field: this.$refs.dateInput,   //绑定日期插件的input对象 
		      format: 'YYYY/MM/DD',
		      i18n:i18n   //对默认的日期进行格式化，包括汉化
		    })
			var startDate,
			        endDate,
			        updateStartDate = function() {
			            startPicker.setStartRange(startDate);
			            endPicker.setStartRange(startDate);
			            endPicker.setMinDate(startDate);
			        },
			        updateEndDate = function() {
			            startPicker.setEndRange(endDate);
			            startPicker.setMaxDate(endDate);
			            endPicker.setEndRange(endDate);
			        },
			        startPicker = new Pikaday({
			            field: that.$refs.start,
						trigger: document.getElementById('start_but'),
						toString: function(date, format) {                    //转换输出格式
							return dateFns.format(date, format);
						},
						firstDay: 1,
						yearRange: [2017,2022],
			            // minDate: new Date(),
			            // maxDate: new Date(2020, 12, 31),
			            onSelect: function() {
			                startDate = this.getDate();
			                updateStartDate();
			            }
			        }),
			        endPicker = new Pikaday({
			            field: that.$refs.end,
						trigger: document.getElementById('end_but'),
						toString: function(date, format) {                   //转换输出格式
							return dateFns.format(date, format);
						},
						firstDay: 1,
						yearRange: [2017,2022],
			            // minDate: new Date(),
			            // maxDate: new Date(2020, 12, 31),
			            onSelect: function() {
			                endDate = this.getDate();
			                updateEndDate();
			            }
			        }),
			        _startDate = startPicker.getDate(),
			        _endDate = endPicker.getDate();
			
			        if (_startDate) {
			            startDate = _startDate;
			            updateStartDate();
			        }
			
			        if (_endDate) {
			            endDate = _endDate;
			            updateEndDate();
			        }
		
		    this.$once('hook:beforeDestroy', function () {   //销毁控件所占资源
		      picker.destroy()
		    })
		  },

同时建议设立一个按钮来获取input中得到的数据

// A code block
<button @click="aaa">查询</button>

aaa(){
				var a = this.$refs.start;
				var dataStart = a.value;
				var useTimeStart = dataStart + ' 00:00:01';
				this.choiceTime.splice(0,1,useTimeStart);
				
				var b = this.$refs.end;
				var dataEnd = b.value;
				var useTimeEnd = dataEnd + ' 00:00:01';
				this.choiceTime.splice(1,1,useTimeEnd);
				
				var datas = [dataStart,dataEnd]
				this.$store.commit('getuseSeeTime',datas)
				
				console.log(this.choiceTime[0]);
				console.log(this.choiceTime[1]);
				
				
				if(
				this.choiceTime[0] != " 00:00:01" 
				&& 
				this.choiceTime[1] != " 00:00:01"
				){
					// this.choiceTime.splice(2,1,'自定义');
					// this.$store.commit('getTimeButtomIsit',false);
					// this.$store.commit('getUseTime',this.choiceTime);
					this.$emit('settime',this.choiceTime)
					console.log(this.choiceTime);
				}else {
					this.choiceTime = ['请选择正确的时间范围','请选择正确的时间范围']
					console.log('no')
				}
			},

注意

在input中暂时没有看到有直接的内部变量来接收值，（若又大神指导，希望能帮我解惑，）目前只有通过ref来获取input中的value值，可以获取到数据