vue-hash-calendar 日期选择

火车票模块需要实现的功能：
选择日期，根据日期计算星期

npm i vue-hash-calendar

// main.js引入
import vueHashCalendar from 'vue-hash-calendar'
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
Vue.use(vueHashCalendar)

定义一个子组建，方便每个页面调用

<!-- 
	参数说明：
	:visible.sync	是否显示
	format="YY-MM-DD"	确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”
	:showTodayButton="false"  是否显示返回今日按钮
	:disabledWeekView="true"
	:disabled-date="disabledDate"	禁用的日期
	pickerType="date"			选择器类型 datetime：日期+时间 date：日期 time：时间
	:defaultDatetime="time"		指定默认时间。中国标准时间
 -->
<template>
    <div class="train_time">
        <vue-hash-calendar 
        :visible.sync="time_show"
        format="YY-MM-DD"
        :showTodayButton="false" 
        :disabledWeekView="true"
        :disabled-date="disabledDate"
        pickerType="date"
        :defaultDatetime="time"
        @click="dateChange"></vue-hash-calendar>
    </div>
</template>
<script>
export default {
    props: {

    },
    data() {
        return {
            time_show:true,
            time:new Date(),//只接受中国标准时间
        }
    },
    mounted() {
        if(localStorage.getItem('time')){
            this.time = this.formatterDate(localStorage.getItem('time'))
        }else{
            this.time = new Date();
        }
    },
    methods: {
        // 禁用的日期
        disabledDate(date) {
          let timestamp = date.getTime()
          let oneDay = 24 * 60 * 60 * 1000
          if (timestamp < new Date().getTime() - oneDay) {
          	return true
          }
          return false
        },
        //dateChange: 是父组件指定的传数据绑定的函数，date:子组件给父组件传递的数据
        dateChange(date) {
            this.$emit('dateChange',date);
        },
        //日期转中国标准时间
        formatterDate (date) {
            let result = new Date(date);
            return result;
        }
    },
}

</script>
<style scoped lang="less">
.train_time {
    background: #fff;
    @{deep}.calendar_item{/*初始化背景可能会是透明的bug*/
        background: #fff!important;
    }
}
</style>

父组件调用

<template>
	<!-- 选择日期 -->
	<van-popup v-model="time_show" position="bottom" class="time_show">
		<trainTime @dateChange="dateChange"></trainTime>
	</van-popup>
</template>
<script>
    import trainTime from "@/components/train_time";
    export default {
        components: {
        	trainTime
        },
        data() {
            return {
                time_show: false,//选择日期弹出
                time:'',//默认时间 当天
                week:'',//星期
            }
        },
        mounted() {
            //判断是否存有日期
            if(localStorage.getItem('time')){
                this.time = localStorage.getItem('time')//使用存储的日期
            }else{
                this.time = this.$moment(Date.parse(new Date())).format('YYYY-MM-DD');//使用当前日期
            }
            this.week = this.get_week(this.time);//计算得到星期几
        },
        methods: {
            // 日期改变触发
            dateChange(date) {
                this.time = date;//得到日期年月日
                this.week = this.get_week(date);//根据日期计算星期
                this.time_show = false;//隐藏弹窗
            },
            
            //获取星期
            get_week(time) {
			    let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			    let myDate = new Date(Date.parse(time.replace(/-/g, "/")));
			    let val = weekDay[myDate.getDay()];
			    return val;
			},
			
			/**
			 * moment日期格式化;
			 * YYYY-MM-DD HH:mm:ss 
			 * 年-月-日 时:分:秒
			 * moment(timeStamp).format('YYYY-MM-DD HH:mm:ss')
			 */
			moment(timeStamp) {
			    //转换成13位毫秒级的时间戳;
			    timeStamp = String(timeStamp).length < 11 ? timeStamp * 1000 : timeStamp;
			    var dateObj = new Date(timeStamp),
			        year = dateObj.getFullYear(),
			        month = zeroFill(dateObj.getMonth() + 1),
			        date = zeroFill(dateObj.getDate()),
			        hours = zeroFill(dateObj.getHours()),
			        minutes = zeroFill(dateObj.getMinutes()),
			        seconds = zeroFill(dateObj.getSeconds()),
			        milliSeconds = dateObj.getMilliseconds();
			    return {
			        format: (str) => {
			            return str.replace(/YYYY/g, year)
			                .replace(/MM/g, month)
			                .replace(/DD/g, date)
			                .replace(/HH/g, hours)
			                .replace(/mm/g, minutes)
			                .replace(/ss/g, seconds);
			        }
			    }
			}
        },
    }
</script>

github地址：vue-hash-calendar