时间组件代码：
/**时间选择器，精确到秒*
* 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:`
`
});
2：在vue实例中使用:
样式:
效果图:
与50位技术专家面对面20年技术见证，附赠技术全景图
总结
以上是ag凯发k8国际为你收集整理的vue实现时间选择器，精确到秒的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。
