vue日期选择器,vue日期选择器插件开始结束

　　这篇文章主要为大家详细介绍了某视频剪辑软件日期时间选择器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件日期时间选择器组件的具体代码，供大家参考，具体内容如下

　　1.效果图如下

　　单选日期选择器

　　多选日期选择器

　　日期时间选择器

　　2.准备

　　日期原型格式化工具方法

　　约会。原型。格式=函数(fmt){

　　//作者：meizz

　　var o={

　　 M : this.getMonth() 1，//月份

　　d : this.getDate()，//日

　　 h : this.getHours()，//小时

　　 m : this.getMinutes()，//分

　　 s : this.getSeconds()，//秒

　　问：数学。地板((这个。getmonth()3)/3)，//季度

　　S: this.getMilliseconds() //毫秒

　　};

　　if (/(y )/.测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　(this.getFullYear() ).substr(4 - RegExp .$1 .长度)

　　);

　　对于(o中的变量k)

　　if(new RegExp(( k )).测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　正则表达式. length==1？o[k] : (00 o[k]).substr(( o[k]).长度)

　　);

　　返回滤波多音

　　};

　　根据传入时间日期解析出该月份，获取该月的第一天和最后一天的时间戳，和该月时间戳对应的星期

　　【注意】

　　一定要解析该月份第一天的零点零分，js大部分日期解析为那天的8点，但有些日期会解析为那天的零点零分，这样就会出现时间戳错误，导致获取该月份天数错误

　　因为一般显示该月份是包含上月或者下个月的一些在该月星期的日期，所以也要计算出该月包含的几个星期的天

　　getMonthDay() {

　　//该月第一天

　　var monthFirst=新日期(这个。年份-这个。月-01 00:00 )；

　　var w=第一个月。getday()；

　　//下个月第一天减去1s为该月最后一天时间

　　这个。开始日=月首。gettime()-w * 24 * 3600 * 1000；

　　如果(this.month==12) {

　　this.endDay=新日期(今年1 -01-01 00:00 ).getTime()-1000；

　　}否则{

　　this.endDay=

　　新日期（今年-(本月一日)-01 00:00 )。getTime() -

　　1000;

　　}

　　//计算该月包含的星期，并获取对应星期的第一天

　　var月日=(本。结束日1000-这个。开始日)/(24 * 3600 * 1000)；

　　这个。weeknum=math。ceil(月日/7)；

　　//获取对应的该月天数

　　这个。monthlist=[]；

　　for(var I=0；i this.weekNumi ) {

　　var item=[]；

　　for(var j=0；j 7；j ) {

　　项目。推送（

　　这个。开始日I * 24 * 3600 * 1000 * 7j * 24 * 3600 * 1000

　　);

　　}

　　这个。月嫂。推(项)；

　　}

　　3.具体实现

　　半导体色敏传感器样式。日期选择器-背景{

　　位置：固定；

　　左：0;

　　top:0；

　　宽度：100%;

　　身高：100%;

　　z指数：5;

　　}。日期选择器{

　　背景色：白色；

　　位置：固定；

　　显示：块；

　　填充：4px

　　z指数：6;

　　边框：纯色1px gainsboro

　　边框-半径：2px。顶部拾取器{

　　显示器：flex

　　弯曲方向：行；

　　对齐-项目：居中；

　　高度：30px

　　行高：30px。选取器-箭头{

　　显示：内嵌-伸缩；

　　对齐-项目：居中；

　　对齐-内容：居中；

　　宽度：30px

　　高度：30px

　　光标：指针；iconfont {

　　颜色：# 8 A8 a8a

　　}。图标字体：活动，图标字体：悬停{

　　颜色：# 388dea

　　}

　　}。日期-文本{

　　flex:1；

　　字体粗细：粗体；

　　显示：内嵌-块；

　　文本对齐：居中；

　　字体大小：14px

　　}

　　}。选取器-内容{

　　显示：块；

　　边框顶部：纯色1px gainsboro

　　边框-底部：纯色1px gainsboro

　　高度：160像素

　　表格{

　　宽度：100%;

　　边框-塌陷：塌陷；

　　边框间距：0;

　　字体大小：12px

　　行高：20px！重要；

　　标题tr {

　　背景色：# cedeee

　　th {

　　文本对齐：居中；

　　字体粗细：正常；

　　}

　　tbody {

　　tr {

　　td {

　　字体粗细：600;

　　光标：指针；

　　文本对齐：居中；

　　}

　　td.gray {

　　字体粗细：正常；

　　颜色：# 8 A8 a8a

　　}

　　td.active {

　　颜色：白色；

　　背景：# 388dea

　　}

　　}。选取器-内容1 {

　　@延伸。选取器-内容；

　　显示器：flex

　　弯曲方向：行；

　　表格{

　　宽度：calc(100%-40px)；

　　}。工时表{

　　显示：内嵌-块；

　　列表样式：无；

　　填充：0;

　　边距：0;

　　身高：100%;

　　溢出-x:隐藏；

　　宽度：40px

　　字体大小：12px

　　溢出-y:自动；

　　李{

　　填充：0;

　　边距：0;

　　显示器：flex

　　对齐-项目：居中；

　　填充：0 4px

　　高度：20px

　　光标：指针；

　　}

　　李：不是(:最后一个孩子){

　　边框-底部：纯色1px gainsboro

　　}

　　李。主动{

　　颜色：白色；

　　背景：# 388dea

　　}

　　}。小时列表：-网络工具包-滚动条{

　　背景：透明；

　　高度：8px

　　宽度：8px

　　边框：无；

　　}。小时列表：-网络工具包-滚动条-缩略图{

　　背景：浅灰色；

　　边框半径：5px

　　}

　　//设置滚动条目标

　　}。选取器-页脚{

　　显示：块；

　　行高：30px

　　文本对齐：右对齐；

　　空白：nowrap

　　按钮{

　　大纲：无；

　　边框：纯色1px gainsboro

　　边框-半径：2px

　　颜色：# 8 A8 a8a

　　高度：24px

　　字体大小：12px

　　背景色：# f3f3f3

　　}

　　按钮：活动，

　　按钮：悬停{

　　边框颜色：# 388dea

　　颜色：# 388dea

　　背景色：# d9edf6

　　}

　　单选日期选择器日期选择器

　　模板

　　div style=display:inline-block

　　span @ click=显示选取器“{ getLangText(label。日期选取器)} }/span

　　div class= date-picker-BG v-show= is show @ click=关闭选取器/div

　　差异

　　 class=日期选择器

　　v-show=isShow

　　:style={width:220px ，top:pickerTop？pickerTop px:}

　　div class=picker-top

　　LSA quo；lsaquo/span

　　span class= picker-arrow @ click= pre month LSA quo；/span

　　span class= date-text " { year } }-{ { month 9？月："0"月} span

　　span class= picker-arrow @ click=下个月 rsquo/span

　　span class= picker-arrow @ click=明年 rsquorsaquo/span

　　/div

　　！-生成对应的月份星期表格开始-

　　div class=选取器-内容

　　桌子

　　四羟乙基己二酰胺

　　th v-for=(item，idx)in week list :key= week idx { { getLangText(item)} }/th

　　/tr

　　/thead

　　在需要分行下载处加上

　　tr v-for=周数中的idx :key= 周数 idx

　　任务描述

　　v-for=m in 7

　　:key=monthDay idx _ m

　　:class=[新日期（每月列表[idx-1][m-1])。getMonth() 1==month？ gray ，select date==monthList[idx-1][m-1]？活动": ]"

　　@ click= on select date(monthly list[idx-1][m-1])

　　@ dblclick= onConfirmDate(monthList[idx-1][m-1])

　　{ {新日期（每月列表[idx-1][m-1].getDate()}}/td

　　！-日期为该月为深色否则为浅色-

　　/tr

　　/tbody

　　/表格

　　/div

　　！-生成对应的月份星期表格结束-

　　div class=选取器-页脚

　　button @ click=关闭选取器“{ getLangText(label。关闭)} }/按钮

　　button @ click= set now { getLangText(label。今天)} }/按钮

　　！-button @ click=确认选取器“{ getLangText(label。好)} }/button-

　　/div

　　/模板

　　脚本

　　约会。原型。格式=函数(fmt){

　　//作者：meizz

　　var o={

　　 M : this.getMonth() 1，//月份

　　d : this.getDate()，//日

　　 h : this.getHours()，//小时

　　 m : this.getMinutes()，//分

　　 s : this.getSeconds()，//秒

　　问：数学。地板((这个。getmonth()3)/3)，//季度

　　S: this.getMilliseconds() //毫秒

　　};

　　if (/(y )/.测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　(this.getFullYear() ).substr(4 - RegExp .$1 .长度)

　　);

　　对于(o中的变量k)

　　if(new RegExp(( k )).测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　正则表达式. length==1？o[k] : (00 o[k]).substr(( o[k]).长度)

　　);

　　返回滤波多音

　　};

　　导出默认值{

　　姓名：日期选择器，

　　道具：{

　　语言类型：{

　　类型：字符串，

　　默认值：窗口。本地存储。getitem( langType )

　　日期：{

　　类型：字符串，

　　默认值：新日期()。格式(“yyyy-MM-dd”)

　　isScroll: {

　　类型：布尔型，

　　默认值：错误

　　isShow:{

　　类型：布尔型，

　　默认值：错误

　　}

　　数据：()=({

　　标签:{

　　好的：{ zh:确定，恩：好 },

　　关闭：{ zh:关闭，恩：关闭 },

　　今天：{ zh:今天，恩："今天"},

　　日期选取器：{ zh:日期选择，恩：日期选择器 }

　　周列表：[

　　{ zh:日，恩：孙 },

　　{ zh:一，en: Mon }，

　　{ zh:二，en: Tue }，

　　{ zh:三，恩：" Wed"}，

　　{ zh:四，en: Thu }，

　　{ zh:五，en: Fir }，

　　{ zh:六，恩：星期六 }

　　年份：新日期()。getFullYear()，

　　月：新日期()。getMonth() 1，

　　日：新日期()。getDate()，

　　开始日期：0,

　　结束日期：0,

　　周数：0

　　选择日期：新日期（新日期()。格式( yyyy-MM-dd 00:00 ).getTime()，

　　月度列表：[],

　　pickerTop: 0

　　}),

　　观察：{

　　年份(){

　　这个。getmonthday()；

　　月(){

　　这个。getmonthday()；

　　}

　　方法：{

　　getLangText(item) {

　　如果（项目){

　　if (this.langType==en) {

　　if (item.en item.en.length 1) {

　　返回item.en.substring(0，1).toupper case()项目。恩。子串(1)；

　　} else if(项。en项目。恩。长度==1){

　　退货项目。恩。toupper case()；

　　}否则{

　　返回-;

　　}

　　}否则{

　　退货item.zh？项目。张：“-”；

　　}

　　}否则{

　　返回-;

　　}

　　preYear() {

　　这个。年份=这个。第一年；

　　下一年(){

　　这个。年份=这个。第一年；

　　下个月(){

　　如果(this.month==12) {

　　这个。年份=这个。第一年；

　　这个。月=1；

　　}否则{

　　本月；

　　}

　　preMonth() {

　　if (this.month==1) {

　　这个。年份=这个。第一年；

　　本月=12

　　}否则{

　　这个。月-；

　　}

　　显示选择器(e) {

　　如果(this.isScroll) {

　　这个。picker top=e . clienty e . offsety

　　var h=文档。getelementbyid( app ).偏高；

　　if (this.pickerTop h - 230) {

　　这个。picker top=h-230；

　　}

　　这个. emit(update:is-show ，true)；

　　var时间=新日期(这个日期).getTime()；

　　今年=新日期（时间)。获取整年()；

　　本月=新日期（时间)。getMonth()1；

　　这一天=新日期（时间)。getDate()；

　　this.selectDate=新日期（

　　新日期（时间)。格式(“yyyy-MM-dd 00:00”)

　　).getTime()；

　　onConfirmDate(时间){

　　this.onSelectDate(时间);

　　这个。确认提货人()；

　　closePicker() {

　　这个. emit(update:is-show ，false)；

　　setNow() {

　　今年=新日期()。获取整年()；

　　本月=新日期()。getMonth()1；

　　这一天=新日期()。getDate()；

　　this.selectDate=新日期（

　　新日期()。格式(“yyyy-MM-dd 00:00”)

　　).getTime()；

　　confirmPicker() {

　　这个$emit(update:date)，新日期(this.selectDate).格式( yyyy-MM-DD )；

　　这个发出(

　　选取器-结果，

　　新日期(这个。选择此日期。选择小时* 3600000).格式（

　　年-月-日 hh:00

　　)

　　);

　　这个。关闭选取器()；

　　getMonthDay() {

　　var monthFirst=新日期(这个。年份-这个。月-01 00:00 )；

　　var w=第一个月。getday()；

　　这个。开始日=月首。gettime()-w * 24 * 3600 * 1000；

　　如果(this.month==12) {

　　this.endDay=新日期(今年1 -01-01 00:00 ).getTime()-1000；

　　}否则{

　　this.endDay=

　　新日期（今年-(本月一日)-01 00:00 )。getTime() -

　　1000;

　　}

　　var月日=(本。结束日1000-这个。开始日)/(24 * 3600 * 1000)；

　　这个。weeknum=math。ceil(月日/7)；

　　这个。monthlist=[]；

　　for(var I=0；i this.weekNumi ) {

　　var item=[]；

　　for(var j=0；j 7；j ) {

　　项目。推送（

　　这个。开始日I * 24 * 3600 * 1000 * 7j * 24 * 3600 * 1000

　　);

　　}

　　这个。月嫂。推(项)；

　　}

　　onSelectDate(时间){

　　this.selectDate=time

　　今年=新日期（时间)。获取整年()；

　　本月=新日期（时间)。getMonth()1；

　　这一天=新日期（时间)。getDate()；

　　这个emit(update:date ，新日期（时间)。格式( yyyy-MM-DD )；

　　}

　　已安装(){

　　这个。getmonthday()；

　　}

　　};

　　/脚本

　　样式lang=scss 范围

　　/风格

　　多选日期选择器日期选择器一

　　模板

　　div style=display:inline-block

　　span @click=showPicker 日期选择/span

　　div class= date-picker-BG v-show= is show @ click=关闭选取器/div

　　div class= date-picker v-show= is show style= width:220 px

　　div class=picker-top

　　LSA quo；lsaquo/span

　　span class= picker-arrow @ click= pre month LSA quo；/span

　　span class= date-text " { year } }-{ { month 9？月："0"月} span

　　span class= picker-arrow @ click=下个月 rsquo/span

　　span class= picker-arrow @ click=明年 rsquorsaquo/span

　　/div

　　！-生成对应的月份星期表格开始-

　　div class=选取器-内容

　　桌子

　　四羟乙基己二酰胺

　　th v-for=(item，idx)in week list :key= week idx { { getLangText(item)} }/th

　　/tr

　　/thead

　　在需要分行下载处加上

　　tr v-for=周数中的idx :key= 周数 idx

　　任务描述

　　v-for=m in 7

　　:key=monthDay idx _ m

　　:class=[新日期（每月列表[idx-1][m-1])。getMonth() 1==month？ gray，getSelectDate(monthList[idx-1][m-1])？活动": ]"

　　@ click= on select date(monthly list[idx-1][m-1])

　　{ {新日期（每月列表[idx-1][m-1].getDate()}}/td

　　！-日期为该月为深色否则为浅色-

　　/tr

　　/tbody

　　/表格

　　/div

　　！-生成对应的月份星期表格结束-

　　div class=选取器-页脚

　　button @click=onFullMonth 整月/按钮

　　button @click=onSelectDate(新日期（新日期()。格式( yyyy-MM-dd 00:00 ). getTime())今天/按钮

　　button @click=closePicker 关闭/按钮

　　/div

　　/模板

　　脚本

　　约会。原型。格式=函数(fmt){

　　//作者：meizz

　　var o={

　　 M : this.getMonth() 1，//月份

　　d : this.getDate()，//日

　　 h : this.getHours()，//小时

　　 m : this.getMinutes()，//分

　　 s : this.getSeconds()，//秒

　　问：数学。地板((这个。getmonth()3)/3)，//季度

　　S: this.getMilliseconds() //毫秒

　　};

　　if (/(y )/.测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　(this.getFullYear() ).substr(4 - RegExp .$1 .长度)

　　);

　　对于(o中的变量k)

　　if(new RegExp(( k )).测试(fmt))

　　fmt=fmt.replace(

　　正则表达式。$1,

　　正则表达式. length==1？o[k] : (00 o[k]).substr(( o[k]).长度)

　　);

　　返回滤波多音

　　};

　　导出默认值{

　　姓名：日期选择器，

　　道具：{

　　语言类型：{

　　类型：字符串，

　　默认值：“zh”

　　日期：{

　　类型：字符串，

　　默认值：""

　　isShow:{

　　类型：布尔型，

　　默认值：错误

　　}

　　数据：()=({

　　周列表：[

　　{ zh:日，恩：孙 },

　　{ zh:一，en: Mon }，

　　{ zh:二，en: Tue }，

　　{ zh:三，恩：" Wed"}，

　　{ zh:四，en: Thu }，

　　{ zh:五，en: Fir }，

　　{ zh:六，恩：星期六 }

　　年份：新日期()。getFullYear()，

　　月：新日期()。getMonth() 1，

　　日：新日期()。getDate()，

　　开始日期：0,

　　结束日期：0,

　　周数：0

　　选择日期：新日期（新日期()。格式( yyyy-MM-dd 00:00 ).getTime()，

　　月度列表：[],

　　结果：[]

　　}),

　　观察：{

　　日期(){

　　这个。解析日期()；

　　年份(){

　　这个。getmonthday()；

　　月(){

　　这个。getmonthday()；

　　}

　　方法：{

　　getLangText(item) {

　　如果（项目){

　　if (this.langType==en) {

　　if (item.en item.en.length 1) {

　　返回item.en.substring(0，1).toupper case()项目。恩。子串(1)；

　　} else if(项。en项目。恩。长度==1){

　　退货项目。恩。toupper case()；

　　}否则{

　　返回-;

　　}

　　}否则{

　　退货item.zh？项目。张：“-”；

　　}

　　}否则{

　　返回-;

　　}

　　preYear() {

　　这个。年份=这个。第一年；

　　下一年(){

　　这个。年份=这个。第一年；

　　下个月(){

　　如果(this.month==12) {

　　这个。年份=这个。第一年；

　　这个。月=1；

　　}否则{

　　本月；

　　}

　　preMonth() {

　　if (this.month==1) {

　　这个。年份=这个。第一年；

　　本月=12

　　}否则{

　　这个。月-；

　　}

　　getSelectDate(time) {

　　for(var I=0；I this . result . length){

　　if (time==this.result[i]) {

　　返回真实的

　　}

　　返回错误的

　　显示选择器(e) {

　　这个. emit(update:is-show ，true)；

　　var时间=新日期()。getTime()；

　　今年=新日期（时间)。获取整年()；

　　本月=新日期（时间)。getMonth()1；

　　这一天=新日期（时间)。getDate()；

　　this.selectDate=新日期（

　　新日期（时间)。格式(“yyyy-MM-dd 00:00”)

　　).getTime()；

　　onConfirmDate(时间){

　　this.onSelectDate(时间);

　　这个。确认提货人()；

　　closePicker() {

　　这个. emit(update:is-show ，false)；

　　setNow() {

　　今年=新日期()。获取整年()；

　　本月=新日期()。getMonth()1；

　　这一天=新日期()。getDate()；

　　this.selectDate=新日期（

　　新日期()。格式(“yyyy-MM-dd 00:00”)

　　).getTime()；

　　confirmPicker() {

　　这个$emit(update:date)，新日期(this.selectDate).格式( yyyy-MM-DD )；

　　这个发出(

　　选取器-结果，

　　新日期(这个。选择此日期。选择小时* 3600000).格式（

　　年-月-日hh:00

　　)

　　);

　　这个。关闭选取器()；

　　getMonthDay() {

　　var monthFirst=新日期(这个。年份-这个。月-01 00:00 )；

　　var w=第一个月。getday()；

　　这个。开始日=月首。gettime()-w * 24 * 3600 * 1000；

　　如果(this.month==12) {

　　this.endDay=新日期(今年1 -01-01 00:00 ).getTime()-1000；

　　}否则{

　　this.endDay=

　　新日期（今年-(本月一日)-01 00:00 )。getTime() -

　　1000;

　　}

　　var月日=(本。结束日1000-这个。开始日)/(24 * 3600 * 1000)；

　　这个。weeknum=math。ceil(月日/7)；

　　这个。monthlist=[]；

　　for(var I=0；i this.weekNumi ) {

　　var item=[]；

　　for(var j=0；j 7；j ) {

　　项目。推送（

　　这个。开始日I * 24 * 3600 * 1000 * 7j * 24 * 3600 * 1000

　　);

　　}

　　这个。月嫂。推(项)；

　　}

　　onSelectDate(时间){

　　this.selectDate=time

　　今年=新日期（时间)。获取整年()；

　　本月=新日期（时间)。getMonth()1；

　　这一天=新日期（时间)。getDate()；

　　var tag=true

　　//已选择就取消选择

　　for(var I=0；I this . result . length){

　　 if (this.result[i] == time) {

　　 tag = false;

　　 this.result.splice(i, 1);

　　 break;

　　 }

　　 //未选择就添加日期

　　 if (tag) {

　　 this.result.push(time);

　　 this.result = this.result.sort(function(a, b) {

　　 return a - b;

　　 });

　　 }

　　 var list = [];

　　 for (var i = 0; i < this.result.length; i++) {

　　 if (this.result[i] > 0) {

　　 list.push(new Date(this.result[i]).format("yyyy-MM-dd"));

　　 }

　　 if (list.length > 0) {

　　 this.$emit("update:date", list.join(",") + "(共" + list.length + "天)");

　　 } else {

　　 this.$emit("update:date", "");

　　 }

　　 this.$emit("picker-result", this.result);

　　 onFullMonth() {

　　 this.$emit("update:date", this.year + "年" + this.month + "月份");

　　 this.$emit("picker-result", 30);

　　 parseDate() {

　　 if (this.date) {

　　 var str = this.date;

　　 if (this.date.indexOf("(") > 0) {

　　 str = this.date.substring(0, this.date.indexOf("("));

　　 }

　　 if (str) {

　　 var list = str.split(",");

　　 var result = [];

　　 for (var i = 0; i < list.length; i++) {

　　 result.push(

　　 new Date(

　　 new Date(list[i]).format("yyyy-MM-dd 00:00:00")

　　 ).getTime()

　　 );

　　 }

　　 this.result = result;

　　 }

　　 mounted() {

　　 this.getMonthDay();

　　 this.parseDate();

　　 }

　　};

　　</script>

　　</style>

　　日期时间选择器

　　 <span @click="showPicker">{{getLangText(label.datetimePicker)}}</span>

　　 <span class="picker-arrow" @click="preYear">&lsaquo; &lsaquo;</span>

　　 <span class="picker-arrow" @click="preMonth">&lsaquo;</span>

　　 <span class="date-text">{{year}}-{{month>9?month:"0"+month}}</span>

　　 <span class="picker-arrow" @click="nextMonth">&rsaquo;</span>

　　 <span class="picker-arrow" @click="nextYear">&rsaquo;&rsaquo;</span>

　　 </div>

　　 <table>

　　 <thead>

　　 <tr>

　　 <th v-for="(item,idx) in weekList" :key="week+idx">{{getLangText(item)}}</th>

　　 </tr>

　　 </thead>

　　 <tbody>

　　 <td

　　 v-for="m in 7"

　　 :key="monthDay+idx+_+m"

　　 :class="[new Date(monthList[idx-1][m-1]).getMonth()+1==month?:gray,selectDate==monthList[idx-1][m-1]?active:]"

　　 @click="onSelectDate(monthList[idx-1][m-1])"

　　 @dblclick="onConfirmDate(monthList[idx-1][m-1])"

　　 >{{new Date(monthList[idx-1][m-1]).getDate()}}</td>

　　 </tr>

　　 </tbody>

　　 </table>

　　 <li

　　 v-for="n in 24"

　　 :key="hourList+n"

　　 @click="onSelectHour(n-1)"

　　 :class="[selectHour==n-1?active:]"

　　 @dblclick="onConfirmHour(n-1)"

　　 >{{n-1}}:00</li>

　　 </ul>

　　 </div>

　　 <button @click="closePicker">{{getLangText(label.close)}}</button>

　　 <button @click="setNow">{{getLangText(label.today)}}</button>

　　 </div>

　　</template>

　　Date.prototype.format = function(fmt) {

　　 //author: meizz

　　 var o = {

　　 "M+": this.getMonth() + 1, //月份

　　 "d+": this.getDate(), //日

　　 "h+": this.getHours(), //小时

　　 "m+": this.getMinutes(), //分

　　 "s+": this.getSeconds(), //秒

　　 "q+": Math.floor((this.getMonth() + 3) / 3), //季度

　　 S: this.getMilliseconds() //毫秒

　　 };

　　 if (/(y+)/.test(fmt))

　　 fmt = fmt.replace(

　　 RegExp.$1,

　　 (this.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;

　　};

　　export default {

　　 name: "DateTimePicker",

　　 props: {

　　 langType: {

　　 type: String,

　　 default: window.localStorage.getItem("langType")

　　 datetime: {

　　 type: String,

　　 default: new Date().format("yyyy-MM-dd hh:00")

　　 isShow:{

　　 type:Boolean,

　　 default:false

　　 }

　　 data: () => ({

　　 label: {

　　 ok: { zh: "确定", en: "OK" },

　　 close: { zh: "关闭", en: "close" },

　　 today: { zh: "现在", en: "now" },

　　 datetimePicker: { zh: "日期时间选择", en: "datetimePicker" }

　　 weekList: [

　　 { zh: "日", en: "Sun" },

　　 { zh: "一", en: "Mon" },

　　 { zh: "二", en: "Tue" },

　　 { zh: "三", en: "Wed" },

　　 { zh: "四", en: "Thu" },

　　 { zh: "五", en: "Fir" },

　　 { zh: "六", en: "Sat" }

　　 year: new Date().getFullYear(),

　　 month: new Date().getMonth() + 1,

　　 day: new Date().getDate(),

　　 startDay: 0,

　　 endDay: 0,

　　 weekNum: 0,

　　 selectDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),

　　 monthList: [],

　　 selectHour: new Date().getHours()

　　 }),

　　 watch: {

　　 year() {

　　 this.getMonthDay();

　　 month() {

　　 this.getMonthDay();

　　 }

　　 methods: {

　　 getLangText(item) {

　　 if (item) {

　　 if (this.langType == "en") {

　　 if (item.en && item.en.length > 1) {

　　 return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);

　　 } else if (item.en && item.en.length == 1) {

　　 return item.en.toUpperCase();

　　 } else {

　　 return "--";

　　 }

　　 } else {

　　 return item.zh ? item.zh : "--";

　　 }

　　 } else {

　　 return "--";

　　 }

　　 preYear() {

　　 this.year = this.year - 1;

　　 nextYear() {

　　 this.year = this.year + 1;

　　 nextMonth() {

　　 if (this.month == 12) {

　　 this.year = this.year + 1;

　　 this.month = 1;

　　 } else {

　　 this.month++;

　　 }

　　 preMonth() {

　　 if (this.month == 1) {

　　 this.year = this.year - 1;

　　 this.month = 12;

　　 } else {

　　 this.month--;

　　 }

　　 showPicker() {

　　 this.$emit("update:is-show",true);

　　 var time = new Date(this.datetime).getTime();

　　 this.year = new Date(time).getFullYear();

　　 this.month = new Date(time).getMonth() + 1;

　　 this.day = new Date(time).getDate();

　　 this.selectDate = new Date(

　　 new Date(time).format("yyyy-MM-dd 00:00")

　　 ).getTime();

　　 this.selectHour = new Date(time).getHours();

　　 onConfirmDate(time) {

　　 this.onSelectDate(time);

　　 this.confirmPicker();

　　 onConfirmHour(n) {

　　 this.onSelectHour(n);

　　 this.confirmPicker();

　　 closePicker() {

　　 this.$emit("update:is-show",false);

　　 setNow() {

　　 this.year = new Date().getFullYear();

　　 this.month = new Date().getMonth() + 1;

　　 this.day = new Date().getDate();

　　 this.selectDate = new Date(

　　 new Date().format("yyyy-MM-dd 00:00")

　　 ).getTime();

　　 this.selectHour = new Date().getHours();

　　 confirmPicker() {

　　 this.$emit(

　　 "update:datetime",

　　 new Date(this.selectDate + this.selectHour * 3600000).format(

　　 "yyyy-MM-dd hh:00"

　　 )

　　 );

　　 this.$emit(

　　 "picker-result",

　　 new Date(this.selectDate + this.selectHour * 3600000).format(

　　 "yyyy-MM-dd hh:00"

　　 )

　　 );

　　 this.closePicker();

　　 getMonthDay() {

　　 var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");

　　 var w = monthFirst.getDay();

　　 this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000;

　　 if (this.month == 12) {

　　 this.endDay = new Date(this.year + 1 + "-01-01 00:00").getTime() - 1000;

　　 } else {

　　 this.endDay =

　　 new Date(this.year + "-" + (this.month + 1) + "-01 00:00").getTime() -

　　 1000;

　　 }

　　 var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000);

　　 this.weekNum = Math.ceil(monthDay / 7);

　　 this.monthList = [];

　　 for (var i = 0; i < this.weekNum; i++) {

　　 var item = [];

　　 for (var j = 0; j < 7; j++) {

　　 item.push(

　　 this.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000

　　 );

　　 }

　　 this.monthList.push(item);

　　 }

　　 onSelectHour(n) {

　　 this.selectHour = n;

　　 this.$emit(

　　 "update:datetime",

　　 new Date(this.selectDate + this.selectHour * 3600000).format(

　　 "yyyy-MM-dd hh:00"

　　 )

　　 );

　　 onSelectDate(time) {

　　 this.selectDate = time;

　　 this.year = new Date(time).getFullYear();

　　 this.month = new Date(time).getMonth() + 1;

　　 this.day = new Date(time).getDate();

　　 this.$emit(

　　 "update:datetime",

　　 new Date(time + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")

　　 );

　　 }

　　 mounted() {

　　 this.getMonthDay();

　　 }

　　};

　　</script>

　　</style>

　　使用Picker

　　 <date-picker :date.sync="date1" :is-show.sync="showDate1"></date-picker>

　　 <date-picker1 :date.sync="date2" :is-show.sync="showDate2"></date-picker1>

　　 <datetime-picker :datetime.sync="date3" :is-show.sync="showDate3"></datetime-picker>

　　</section>

　　</template>

　　Date.prototype.format = function(fmt)

　　{ //author: meizz

　　 var o = {

　　 "M+" : this.getMonth()+1, //月份

　　 "d+" : this.getDate(), //日

　　 "h+" : this.getHours(), //小时

　　 "m+" : this.getMinutes(), //分

　　 "s+" : this.getSeconds(), //秒

　　 "q+" : Math.floor((this.getMonth()+3)/3), //季度

　　 "S" : this.getMilliseconds() //毫秒

　　 };

　　 if(/(y+)/.test(fmt))

　　 fmt=fmt.replace(RegExp.$1, (this.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;

　　}

　　import DateTimePicker from "./DateTimePicker";

　　import DatePicker from "./DatePicker";

　　import DatePicker1 from "./DatePicker1";

　　export default {

　　name:"PickerTest",

　　components:{

　　 date-picker:DatePicker,

　　 datetime-picker:DateTimePicker,

　　 date-picker1:DatePicker1

　　data:()=>({

　　 showDate1:false,

　　 showDate2:false,

　　 showDate3:false,

　　 date1:new Date().format("yyyy-MM-dd"),

　　 date2:new Date().format("yyyy-MM-dd"),

　　 date3:new Date().format("yyyy-MM-dd hh:mm:ss"),

　　})

　　}

　　</script>

　　<style>

　　</style>

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读