仿照layDate 日期与时间组件
laydate.css的下载地址:https://www.layui.com/laydate/
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>laydate</title>
<link rel="stylesheet" type="text/css" href="laydate.css">
<script type="text/javascript" src="../frame/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="clock">
<div id="layui-laydate" class="layui-laydate" style="top: 100px;">
<div class="layui-laydate-main laydate-main-list-0">
<div class="layui-laydate-header" v-show="!showTime">
<i class="layui-icon laydate-icon laydate-prev-y" v-on:click="switchPreYear"><< </i>
<i class="layui-icon laydate-icon laydate-prev-m" v-on:click="switchPrevMonth" v-show="!showMonth && !showYear">< </i>
<div class="laydate-set-ym">
<span v-on:click="chooseYear" v-show="!showYear">{{curYear}}年</span><span v-on:click="chooseYear" v-show="showYear">{{aYear[0]}}-{{aYear[aYear.length-1]}}年</span><span v-on:click="chooseMonth" v-show="!showMonth && !showYear">{{fillNumber(curMonth)}}月</span>
</div>
<i class="layui-icon laydate-icon laydate-next-m" v-on:click="switchNextMonth" v-show="!showMonth && !showYear">> </i>
<i class="layui-icon laydate-icon laydate-next-y" v-on:click="switchNextYear">>> </i>
</div>
<div class="layui-laydate-header" v-show="showTime">
<div class="laydate-set-ym">
<span class="laydate-time-text">选择时间</span>
</div>
</div>
<div class="layui-laydate-content">
<table>
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
<tr v-for="n in 6">
<td v-for="layDay in days[n-1]"
:class="{
'laydate-day-prev':layDay.bPreDay,
'laydate-day-next':layDay.bNextDay,
'layui-this':(layDay.day==curDay && layDay.month == curMonth && layDay.year == curYear)
}"
v-on:click="switchDay(layDay)"
>{{layDay.day}}</td>
</tr>
</tbody>
</table>
<ul class="layui-laydate-list laydate-time-list" v-show="showTime">
<li v-for="time in aTime">
<p>{{time.title}}</p>
<ol>
<li v-for="n in time.maxVal" :class="{'layui-this':((time.name=='Hour'&& curHour==n-1)|| (time.name=='Minutes'&& curMinutes==n-1) || (time.name=='Seconds'&& curSeconds==n-1))}" v-on:click="switchTime(time,n-1)">{{fillNumber(n-1)}}</li>
</ol>
</li>
</ul>
<ul class="layui-laydate-list laydate-year-list" v-show="showYear">
<li v-for="year in aYear" :class="{'layui-this': curYear==year}" v-on:click="switchYear(year)">{{year}}年</li>
</ul>
<ul class="layui-laydate-list laydate-month-list" v-show="showMonth">
<li v-for="(month,index) in aMonth" :class="{'layui-this': curMonth==index+1}" v-on:click="switchMonth(index+1)">{{month}}</li>
</ul>
</div>
</div>
<div class="layui-laydate-footer">
<span lay-type="datetime" class="laydate-btns-time" v-on:click="chooseDateOrTime">选择{{title}}</span>
<div class="laydate-footer-btns">
<span lay-type="clear" class="laydate-btns-clear" v-on:click="clearData">清空</span>
<span lay-type="now" class="laydate-btns-now" v-on:click="switchNowDate">现在</span>
<span lay-type="confirm" class="laydate-btns-confirm" v-on:click="handleSubmit">确定</span>
</div>
</div>
</div>
<div id="">
<p>当前时间</p>
<input type="text" name="" v-model="formatDate">
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
js代码
var app = new Vue({
el:"#clock",
data() {
return {
date:new Date(),
currentDate:new Date(),
showTime:false,
showMonth:false,
showYear:false,
aTime: [
{title:"时",maxVal:24,name:"Hour"},
{title:"分",maxVal:60,name:"Minutes"},
{title:"秒",maxVal:60,name:"Seconds"}
],
aMonth:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
}
},
methods:{
getWeek({year=this.curYear,month=this.curMonth,day=this.curDay}) { //返回当前日期是星期几
let oDate = new Date(year,month-1,day);
return oDate.getDay();
},
getLastDate({year=this.curYear,month=this.curMonth}) { //返回当前月份的最后一天年月日
let oDate = new Date(year,month,0);//注意此处的month不需要-1
return {year:oDate.getFullYear(),month:oDate.getMonth()+1,day:oDate.getDate()};
},
convertLastDay({year=this.curYear,month=this.curMonth}) {
let {day} = this.getLastDate({year,month});
let newDay = (day < this.curDay) ? day : this.curDay;
return newDay;
},
switchPrevMonth() { //切换到前一个月
let newMonth = this.curMonth -1;
let newDay = this.convertLastDay({month:newMonth});
this.setCurDate({newMonth,newDay});
},
switchNextMonth() { //切换到下一个月
let newMonth = this.curMonth + 1;
let newDay = this.convertLastDay({month:newMonth});
this.setCurDate({newMonth,newDay});
},
switchPreYear() { //切换到前一年
let newYear = (this.showYear) ? this.curYear-15 : this.curYear-1;
let newDay = this.convertLastDay({year:newYear});
this.setCurDate({newYear,newDay});
},
switchNextYear() { //切换到下一年
let newYear = (this.showYear) ? this.curYear+15 : this.curYear-1;
let newDay = this.convertLastDay({year:newYear});
this.setCurDate({newYear,newDay});
},
switchDay(layDay) { //切换日期
this.setCurDate({newYear:layDay.year,newMonth:layDay.month,newDay:layDay.day});
},
switchTime(time,n) { //切换时间
this['cur'+time.name] = n;
},
switchNowDate() { //切换到当前时间
this.showYMT({});
this.currentDate = new Date();
},
clearData() { //清空
this.showYMT({});
this.switchNowDate();
},
handleSubmit() { //确认
this.showYMT({});
this.date = this.currentDate;
},
chooseDateOrTime() { //选择日期or时间
this.showYMT({t:!this.showTime});
},
fillNumber(num) { //两位数补全。小于10的数字,前面用0补全
return (num >=10) ? num : "0"+num;
},
chooseMonth() { //选月份
this.showYMT({m:true})
},
chooseYear() { //选年份
this.showYMT({y:true})
},
switchMonth(month) { //切换月份
this.curMonth = month;
this.showMonth = false;
},
switchYear(year) { //切换年份
this.curYear = year;
this.showYear = false;
},
showYMT({y=false,m=false,t=false}) {//是否选择年,月,时间
[this.showYear,this.showMonth,this.showTime] = [y,m,t];
},
setCurDate({newYear = this.curYear,newMonth = this.curMonth,newDay = this.curDay,newHour = this.curHour,newMin = this.curMinutes,newSec = this.curSeconds}) {//设置时间
//new Date(y,m,d,h,m,s)注意m取值范围是0-11,0代表1月份
this.currentDate = new Date(newYear,newMonth-1,newDay,newHour,newMin,newSec);
}
},
watch:{
},
computed:{
title() {
return this.showTime ? "日期" : "时间";
},
formatDate() { //将时间转化为YYYY-MM-DD HH:MM:SS的格式
return this.date.getFullYear()+"-"+this.fillNumber(this.date.getMonth()+1)+"-"+this.fillNumber(this.date.getDate())+" "+this.fillNumber(this.date.getHours())+":"+this.fillNumber(this.date.getMinutes())+":"+this.fillNumber(this.date.getSeconds());
},
curYear: {
get() {
return this.currentDate.getFullYear();
},
set(newYear) {
this.setCurDate({newYear})
}
},
aYear() {
let year = [];
for (let i = this.curYear-7; i <= this.curYear+7; i++) {
year.push(i);
}
return year;
},
curMonth: {
get() {
return (this.currentDate.getMonth()+1);
},
set(newMonth) {
this.setCurDate({newMonth:newMonth})
}
},
curDay: {
get() {
return this.currentDate.getDate();
},
set(newDay) {
this.setCurDate({newDay})
}
},
curHour: {
get() {
return this.currentDate.getHours();
},
set(newHour) {
this.setCurDate({newHour});
}
},
curMinutes: {
get() {
return this.currentDate.getMinutes();
},
set(newMin) {
this.setCurDate({newMin});
}
},
curSeconds: {
get() {
return this.currentDate.getSeconds();
},
set(newSec) {
this.setCurDate({newSec});
}
},
days() {
let {year:pYear,month:pMonth,day:pDay} = this.getLastDate({month:this.curMonth-1});
let {year:nYear,month:nMonth,day:nDay} = this.getLastDate({month:this.curmonth+1});
let {day} = this.getLastDate({month:this.curMonth});
let firstWeek = this.getWeek({day:1});
let aDays = [];
for(let [i,count,next] = [0,1,1]; i < 6; i++) {
aDays[i] = [];
for(let j = 0; j < 7; j++) {
if(i == 0 && j < firstWeek) {
aDays[i][j] = {bPreDay:true,day:(pDay-firstWeek+j+1),month:pMonth,year:pYear}
}
else if(count <= day) {
aDays[i][j] = {day:count,month:this.curMonth,year:this.curYear};
count++;
}
else {
aDays[i][j] = {bNextDay:true,day:next,month:nMonth,year:nYear};
next++;
}
}
}
return aDays;
}
},
mounted(){
// $("ul.laydate-time-list ol")[0].scrollTop = 100;
this.timer = setInterval(()=>{
this.date.setSeconds(this.date.getSeconds()+1);
this.date = new Date(this.date);
},1000);
},
destroyed() {
clearInterval(this.timer);
this.timer = null;
},
});