火车票模块需要实现的功能:
选择日期,根据日期计算星期
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