vue日期时间选择组件,vue时间选择控件
这篇文章主要为大家详细介绍了某视频剪辑软件自定义可以选择日期区间段的日历插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件自定义日历插件的具体代码，供大家参考，具体内容如下
由于网上的插件没有符合项目的需求决定自己实现
图示如下：
默认选择今天的日期时间段
1.默认状态（默认选择当前日期的时间段（蓝底背景色代表选中时间段),
2.当前日期之前的时间不可以选择（禁用了点击事件))
3.当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮
选中状态
1.可以跨年分跨月份选择
2.点击取消按钮时回复到默认的选择时间
代码如下
模板
div class=biji
！- div时间段：{{starttime}}至{{endtime}}/div -
div class=mobile-top
div class=sel-time
p开始时间/p
p class= start-date { start time } }/p
/div
div class=unsel-time
p结束时间/p
p class= end-date { end time== ？请选择结束日期：endtime}}/p
/div
/div
div class=title
div class=btn @click=last()
:class=(月=现在的月)(年=现在的年)？ noclick : 上一月/div
div class= text { { Year } }年{ {月}}月/div
div class=btn @click=next()下一月/div
/div
div class=head
[中的div class=days v-for=(项目，索引)星期日,星期一,星期二,星期三,星期四,星期五,星期六] :key=index
{{item}}
/div
/div
div class=wrap
div class=span v-for=(item，index)in calendar list :key= index @ click= click(item。count):class= item== ？孔
:item.countnowtime？"诺利克"
:(项。计数=开始时间项目。计数=结束时间) 项目。计数==开始时间？活动":"。
{{item.value}}
/div
/div
div class=bottombtn
button class=坎科尔-BTN @ click=坎科尔()取消/按钮
当然-BTN @ click= firm()确定/按钮
/div
/div
/模板
脚本
导出默认值{
名称：毕集，
data() {
返回{
现在： ,//当前日期的时间戳
单击项目：0,//点击的时间戳
点击计数：0,//点击次数
开始时间： ,//开始时间数字默认选中当天日期
结束时间： ,//结束时间数字
年份：新日期()。getFullYear()，//日历上的年份
月：新日期()。getMonth() 1，//日历上的月份
日：新日期()。getDate()，//日历上的天份
现在年份：新日期()。getFullYear()，
现在月份：新日期()。getMonth() 1，
今天：新日期()。getDate()，
日历列表：[],
}
},
已创建(){
这个画(this.nowYear，this。现在月)；
设时间_月份=this.nowmonth//现在的月份
让时间日=this.nowDay//现在的天数
如果（本月10日){
time _ month=0 this.nowmonth
}
如果(今天第10天){
time _ day=0 this.nowDay
}
这个。现在时间=这个。现在年份 时间_月 时间_日；
这个。开始时间=这个。现在时间；
这个。结束时间=这个。现在时间；
},
已计算：{},
方法：{
绘制：函数（年、月){
//日期列表
var calendar=[]；
//用当月第一天在一周中的日期值作为当月离第一天的天数（获取当月第一天是周几)
for (var i=1，firstDay=新日期(Year，Month - 1，1).getDay()；我=第一天；i ) {
日历。推(“”)；
}
//用当月最后一天在一个月中的日期值作为当月的天数
for (var i=1，monthDay=新日期（年，月，0)。getDate()；我=月日；i ) {
设时间_月份=月；
设time _ day=I；
如果（第10个月){
time_month=0 月；
}
如果(i 10) {
time _ day=0 I；
}
日历。推送({
价值：我，
计数：年时间_月时间_日
})
}
this.calendarList=calendar
//console.log(日历)
},
last() {
这个。月-；
if (this.month==0) {
本月=12
这个。年份-;
}
这个。画（这个。年，本月);
},
下一个(){
本月；
如果(this.month==13) {
这个。月=1；
这个。年份；
}
这个。画（这个。年，本月);
},
单击（项目){
this.clickcount
this.clickitem=item
//开始日期
if (this.clickcount % 2==1) {
这个。开始时间=这个。单击项目；
this.endtime=
}否则{
这个。结束时间=这个。单击项目；
如果(这个。本次开始时间。结束时间){
这个。结束时间=这个。开始时间；
这个。开始时间=这个。单击项目；
}
}
},
公司(){
},
cancle(){
这个。开始时间=这个。现在时间；
这个。结束时间=这个。现在时间；
}
}
}
/脚本
样式范围的语言=scss
@导入./common/common ；换行{
宽度：7.5雷姆；
高度：自动；
溢出：隐藏；
底部填充：1个；
}。跨度{
宽度：1.07142雷姆；
身高：0.6雷姆；
背景：# fff
颜色：# 337ab7
浮动：左；
文本对齐：居中；
行高：0.6雷姆；活动{
背景：# 037ef5
颜色：# fff
}。无点击{
指针事件：无；
背景：# ccc
}。孔
背景：# fff
指针事件：无；
}
}。移动顶部{
显示器：flex
柔性包装：nowrap
背景：# fff
填充：0.1雷姆0；sel-time {
文本对齐：居中；
宽度：50%;
//border-bottom:solid 2px # 2 a81e 8；开始日期{
颜色：# b1b1b1
页边距-顶部：0.05雷姆；
}
}。unsel-time {
文本对齐：居中；
宽度：50%;结束日期{
颜色：# b1b1b1
页边距-顶部：0.05雷姆；
}
}
}。标题{
宽度：100%;
高度：40px
背景色：# 60a7e8
显示器：flex
柔性包装：nowrap
文本对齐：居中；
颜色：# fff
字体粗细：粗体；
行高：40px。btn{
宽度：1.2雷姆；无点击{
指针事件：无；
背景：# ccc
}
}。文本{
flex:1；
}
}。头部{
显示器：flex
柔性包装：nowrap
文本对齐：居中；
高度：40px
行高：40px。天数{
flex:1；
}
}。bottombtn {
高度：40px
宽度：100%;
显示器：flex
柔性包装：nowrap
按钮{
flex:1；
}。确定-btn {
背景：# 037ef5
颜色：# fff
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。