vue实例小demo之日期与时间插件

最新推荐文章于 2023-04-19 23:07:33 发布
最新推荐文章于 2023-04-19 23:07:33 发布
阅读量406 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39291021/article/details/86743639
版权

仿照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;
	},
});
yoyo勰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap开关(switch)控件学习笔记分享
11-26
bootstrap-switch插件是一个针对Bootstrap实现的开关（switch）按钮控件，可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多，Bootstrap 的应用在国外非常流行，不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的，屏幕的特性促使它更好的发展。 功能说明： 介绍chekbox与radio的两个表单的简单使用，其他更多的效果与功能可以浏览demo，点击按钮以滑动的方式进行on/off切换。 使用说明： 1.引入CSS与JS文件 <link rel="stylesheet" href="s
VUE-Demo实例项目
最新发布
12-13
VUE-Demo实例项目
时间插件（修改）
m0_37200114的博客
03-16 1329
function Datas(num){ var myDate = new Date(); var dates = myDate.setDate(myDate.getDate()+num); dates = new Date(dates); //获取当前年 var year = dates.getFullYear(); //获取当前月 var month = dates.getMonth()+1...
基于FreeSwitch插件实现静音检测（VAD）和语音识别（ASR）
shanghaimoon的专栏
07-04 3843
基于FreeSwitch插件实现的静音检测和语音识别功能
Switch双系统
生活在别处
04-19 3163
大气层新手教程：大气层双系统教程：启用禁用免短接：大气层最新版：16.0.1系统整合包：三上烤鸭B站专栏：
vue使用moment插件，根据指定时间获取时间戳
weixin_43923808的博客
08-08 6735
封装
Windows定时关机程序的开发随笔与经验杂谈（TimeSwitch）
SchRHT Blog
03-17 3016
今天上课学了个叫DateTimePicker的控件，突然想到以前用C#写过的一个设定自动关机的程序，遗憾的是那个程序一直没能拥有通过“设定关机日期/时间”初始化倒计时程序的功能，那么今天是不是就可以实现了呢？我想应该没什么问题吧，于是中午放学后我就泡在了电脑前，打开VC++6.0开始写这个程序。 【一期开发】 以下是我碰到的一些问题：1. 我使用两个DateTimePicker
简单的switch插件
weixin_34072857的博客
05-09 3322
页面效果： 这个switch使用纯CSS实现，小巧简单 css代码 /* switch */ /* 开关样式 */ label.bui-switch-label .bui-switch { width: 50px; height: 25px; position: relative; border: 1px solid #dfdfd...
vue使用fullCalendar插件（类似日程表）
热门推荐
weixin_42617600的博客
04-09 6万+
基本操作传送门 显示效果图 添加效果图 代码： <template> <div style="width:90%;margin: 20px auto;"> <!-- ref 用来拿到这个日历对象 defaultView 默认以月份方式显示 locale 语言 header 头部的按钮 buttonText 头部按钮的文字 plugins 插件 wee......
vue日程安排_fullcalendar-demo
weixin_42493639的博客
12-28 530
locale="zh" 国际化，中文defaultView="dayGridMonth" 默认显示视图，月视图minTime="00:00:00" 时间网格中时间的最小值，0点maxTime="23:00:00" 时间网格中时间的最大值，23点slotDuration="00:15:00" 时间网格中时间间隔，15分钟defaultTimedEventDuration="00:30" 日程事件在时...
手机滑动选择日期时间插件
11-09
移动端。时间筛选日历。用于开发工具类 移动端。时间筛选日历。用于开发工具类
Pikaday-轻量级的日期时间控件-中文版
12-26
相信大家在使用日期插件的时候首先就想到 My97datepicker，他是一个强大的日期选择器，但是样式过于老旧和用起来感觉也不太好。现在有一个根据外国人写的轻量级日期插件 Pikaday改写的中文版的插件可以更好的符合使用要求。
vuejsTime横向时间年月日星期插件
04-17
jq22vuejsTime横向时间年月日星期插件
PC移动端日期时间选择控件
06-06
PC移动端日期时间选择控件,PC移动端日期时间选择控件,PC移动端日期时间选择控件
vue-calendar 日期插件分享
07-21
vue引入日期插件资源
jessibuca-vue-ts-demo-3 ts语法实例
03-21
jessibuca-vue-ts-demo-3 ts语法实例
jessibuca-vue-demo-3实例
03-21
jessibuca-vue-demo-3实例
vite-vue-react-demo:在一个应用程序中结合Vue和React的单独实例的演示
05-09
Vite-Vue-React-Demo 使用Vite构建，这是在单个应用程序中结合2个Vue实例和1个React实例的基本演示。 恶毒Vue 3 React17 尾风npm installnpm run dev
环形加载进度条封装（Vue插件版和原生js版）
12-13
本文实例为大家分享了环形加载进度条封装代码，供大家参考，具体内容如下 1、效果预览 2、用到的知识 主要利用SVG的stroke-dasharray和stroke-dashoffset这两个属性。 在看下面文章之前，你需要了解 <!DOCTYPE ...
vue2 jsplumb插件的demo
11-06
然后，创建一个Vue实例来管理demo应用的数据和行为。 在Vue模板中，可以使用v-for指令和v-bind指令来动态渲染元素，使用v-on指令来绑定事件，以及使用jsPlumb提供的API来创建可拖拽并且连接的元素。 首先，在Vue的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值