vue日期时间选择组件,vue时间选择控件
本文主要详细介绍vue的自定义可选时间的日历组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue自定义可选时间日历组件的具体代码，供大家参考。具体内容如下
日历功能：
1.不能选择过去的时间。
2.不可选择的时间可以定制。
3.本月默认的展览日，其他月份的第一天。不可选的话，后面就延期了。
效果图：
-下面开始表演-
* *首先画日历页面布局，参考win10系统的日历布局*6行7列。为什么？请自己理解……*我是来“偷看”自己的。
BeginDay是当月的第一天是星期几，prevMdays是上月的总天数，nowMdays是当月的总天数，实现了日历的显示效果。一些可能被使用的数据日期被捆绑到标签中。
div class= date content-body-day v-for= item in 42 :key= item
差异
v-if= item-begin day 0 item-begin day=nowMdays
:class={
active-day :` $ { year }/$ { month }/$ { item-begin day } `==curDate
}
@click=dayHandler
:数据年份=年份
:数据-月=月
:数据日期=项目开始日期
:data-dates=年/月/(项目开始日期)
{{ item - beginDay }}
/div
div class= other-day v-else-if= item-begin day=0
{{ item - beginDay prevMdays }}
/div
div class= other-day v-else { { item-begin day-nowMdays } }/div
/div
—下一个…
使用的数据：
*活动日是突出显示的一天，即选定的日期。curDate控制选择哪一天。在这里，默认情况下，会打开一个props数据计时器，并且允许将一些自定义日期作为不可选择的日期传入。如果在点击日期中绑定的日期存在于数组中，它将被返回。如果可以选择的话，选择的结果将通过$emit通过chooseDate事件公开。
//点击切换日。
日处理器(e)
console . log(e)；
var daNum=e . target . dataset；
if(this . cant time . index of(danum . dates)-1){
这个。$toast(非开放日期，不可选择)；
返回；
}
如果(
` $ { danum . year }/$ { danum . month }/$ { danum . day } `=
` $ {新日期()。getFullYear()}/${new Date()。getMonth()
1 }/$ {新日期()。getDate()} `
) {
this . date=e . target . dataset . day；
这个。$emit(
选择日期，
今年/今年.月/今年.日期
);
}否则{
这个。$toast(不能选择过去的时间)；
}
},
//下个月切换
“下个月(){
如果(this.month==12) {
this . month=1；
今年；
}否则{
本月；
}
},
观察切换月份和日期，重点是月份的变化，不知道手表有没有被滥用。
` ` javascript
观察：{
日期(val，oldval) {
if (val) {
this . curdate=` $ { this . year }/$ { this . month }/$ { this . date } `；
}
},
月(val，oldval) {
if (val) {
var ndate
for(var I=1；i=31i ) {
console . log(` $ { this . year }/$ { this . month }/$ { I } `)；
if(this . cant time . index of(` $ { this . year }/$ { this . month }/$ { I } `)0){
Console.log(不存在值，停止，日期停留在 I )；
ndate=I；
打破；
}
}
console.log(ndate，` $ { this . year }/$ { this . month }/$ { ndate } `)；
//将切换后的月份与今天进行比较，默认选择下个月，当天选择当月。
如果(
` $ {今年}/$ {本月}/1
` $ {新日期()。getFullYear()}/${new Date()。getMonth()
1 }/$ {新日期()。getDate()} `
) {
this . curdate=` $ { this . year }/$ { this . month }/$ { ndate } `；
this.date=ndate
}否则{
for (var i=新日期()。getDate()；i=31i ) {
控制台。日志(2 `$ { this。year }/$ { this。month }/$ { I } `)；
如果(这个。不能计时。的索引(` $ { this。year }/$ { this。month }/$ { I } `)0){
this.curDate=` $ {新日期()。getFullYear()}/${new Date().getMonth()
1 }/$ { I } `；
这个。日期=I；
打破；
}
}
}
这个发出(
选择日期，
今年/今年。月/今年。日期
);
}
}
},
父组件中调用
日历：time arry= time array @ choose date= choose handler /calendar
从" @/components/index.js "导入{日历、提醒框}；
导出默认值{
组件：{日历，警报框
},
这样的日历就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。