vue实现时间选择器，精确到秒

时间组件代码：

/**时间选择器，精确到秒* * time: new Date()*/
Vue.component("iic-datetime", {props: {value: {type: [Date, String],default: ""},dateFormat: {//时间到天的格式type: String,default: "yyyy-MM-dd"},timeFormat: {//时间从小时到秒的格式type: String,default: "hh:mm:ss"}},mounted: function() {var dateNode = this.$refs.dateTimeRef;var timeNode = this.$refs.timeRef;var inputTimeNode = this.$refs.inputTimeRef;var that = this;window.addEventListener("click", function(e){if (dateNode.contains(e.target)) {if (!timeNode.contains(e.target) && !inputTimeNode.contains(e.target)) {that.timePanelStatus = false;}} else {that.panelState = false;}});if (this.value) {this.initDate( new Date(this.value) );}},destroyed: function() {window.removeEventListener("click", this.eventListener);},data: function() {return {fullTimeValue: "",//显示日期加精确到秒的时间dateValue: "", // 输入框显示日期timeValue: "",//时间选项timePanelStatus: true,//时间选择面板是否展示date: new Date().getDate(), // 当前日期panelState: false, // 初始值，默认panel关闭tmpMonth: new Date().getMonth(), // 临时月份，可修改month: new Date().getMonth(),tmpYear: new Date().getFullYear(), // 临时年份，可修改weekList: [{ label: "周一", value: 0 },{ label: "周二", value: 1 },{ label: "周三", value: 2 },{ label: "周四", value: 3 },{ label: "周五", value: 4 },{ label: "周六", value: 5 },{ label: "周天", value: 6 }], // 周monthList: [{ label: "一月", value: 0 },{ label: "二月", value: 1 },{ label: "三月", value: 2 },{ label: "四月", value: 3 },{ label: "五月", value: 4 },{ label: "六月", value: 5 },{ label: "七月", value: 6 },{ label: "八月", value: 7 },{ label: "九月", value: 8 },{ label: "十月", value: 9 },{ label: "十一月", value: 10 },{ label: "十二月", value: 11 }], // 月hourList: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],//小时nowValue: 0, // 当前选中日期值choseHour: 0,//选中的小时choseMine: 1,choseSec: 1,panelType: "date" // 面板状态}},watch: {choseHour: function(){this.freshDate();},choseMine: function(){this.freshDate();},choseSec: function(){this.freshDate();}},computed: {minuList: function(){var minuList = [];for (var i = 1; i <= 59; i++){minuList.push(i);}return minuList;},secList: function(){var secList = [];for (var i = 1; i <= 59; i++){secList.push(i);}return secList;},dateList: function(){//获取当月的天数var currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate();//先将当月的日期塞入dateListvar dateList = Array.from({ length: currentMonthLength },function (val, index) {return {currentMonth: true,value: index + 1};});// 获取当月1号的星期是为了确定在1号前需要插多少天var startDay = new Date(this.tmpYear, this.tmpMonth, 1).getDay();// 确认上个月一共多少天var previousMongthLength = new Date(this.tmpYear, this.tmpMonth, 0).getDate();// 在1号前插入上个月日期for (var i = 0, len = startDay; i < len; i++) {dateList = [{ previousMonth: true, value: previousMongthLength - i }].concat(dateList);}// 补全剩余位置,至少14天，则 i < 15for (var j = 1, item = 1; j < 15; j++, item++) {dateList[dateList.length] = { nextMonth: true, value: j };}return dateList;},changeTmpMonth: function() {return this.monthList[this.tmpMonth].label;},// 通过改变this.tmpYear则可以改变年份数组yearList: function() {return Array.from({ length: 12 }, function(value, index){return this.tmpYear + index;});}},methods: {initDate: function(initDate){this.choseHour = initDate.getHours();this.choseMine = initDate.getMinutes();this.choseSec = initDate.getSeconds();this.fullTimeValue = this.formatDate(initDate.getTime());var dateTimeArr = this.fullTimeValue.split(" ");this.dateValue = dateTimeArr[0];this.timeValue = dateTimeArr[1];},setDateWithNow: function(){this.initDate( new Date() );},togglePanel: function(){this.panelState = !this.panelState;},hourScroll: function(evt){var scrollTop = evt.target.scrollTop;this.choseHour = window.parseInt(scrollTop / 20);},minuScroll: function(evt){var scrollTop = evt.target.scrollTop;this.choseMine = window.parseInt(scrollTop / 20) + 1;},secScroll: function(evt){var scrollTop = evt.target.scrollTop;this.choseSec = window.parseInt(scrollTop / 20) + 1;},openPanel: function(){this.panelState = !this.panelState;this.panelType = "date";},openTime: function(){this.timePanelStatus = true;},selectYear: function(item){this.tmpYear = item;this.panelType = "month";},selectMonth: function(item){this.tmpMonth = item.value;this.panelType = "date";},freshDate: function(item){if (item) {// 赋值 当前 nowValue,用于控制样式突出显示当前月份日期this.nowValue = item.value;// 选择了上个月if (item.previousMonth) this.tmpMonth--;// 选择了下个月if (item.nextMonth) this.tmpMonth++;}//计算出选中时间对象var selectDay = new Date(this.tmpYear, this.tmpMonth, this.nowValue, this.choseHour, this.choseMine, this.choseSec);// 格式日期为字符串后，赋值给 inputthis.fullTimeValue = this.formatDate(selectDay.getTime());var dateTimeArr = this.fullTimeValue.split(" ");this.dateValue = dateTimeArr[0];this.timeValue = dateTimeArr[1];this.$emit("input", selectDay);},// 日期格式方法formatDate: function(date) {fmt = this.dateFormat + " " + this.timeFormat;if (date === null || date === "null") {return "--";}date = new Date(Number(date));var o = {"M+": date.getMonth() + 1, // 月份"d+": date.getDate(), // 日"h+": date.getHours(), // 小时"m+": date.getMinutes(), // 分"s+": date.getSeconds(), // 秒"q+": Math.floor((date.getMonth() + 3) / 3), // 季度S: date.getMilliseconds() // 毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1,(date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o) {if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1? o[k]: ("00" + o[k]).substr(("" + o[k]).length));}return fmt;},validateDate: function(item) {if (this.nowValue === item.value && item.currentMonth) {return true;}},left: function() {if (this.panelType === "year") this.tmpYear--;else {if (this.tmpMonth === 0) {this.tmpYear--;this.tmpMonth = 11;} else this.tmpMonth--;}},leftBig: function() {if (this.panelType === "year") {this.tmpYear -= 12;} else {this.tmpYear--;}},right: function() {if (this.panelType === "year") {this.tmpYear++;} else {if (this.tmpMonth === 11) {this.tmpYear++;this.tmpMonth = 0;} else this.tmpMonth++;}},rightBig: function() {if (this.panelType === "year") {this.tmpYear += 12;} else {this.tmpYear++;}},},template:`<<<{{tmpYear}}{{changeTmpMonth}}>>>
{{hour}}
{{minu}}
{{sec}}
确认
{{item}}
{{item.label}}
{{item.label}}
当前时间确认`
});

2：在vue实例中使用:

样式:

效果图:

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！