bootstrap-4的datetimepicker实现多选日期且过期的日期不可选择

     在实现之前,找了很多教程发现并不适用,结果参看了官网的实例,其实也就是几行代码解决的事情,贴出来希望能让和我一样迷惑的小伙伴能尽快解决自己的问题~

本文目录:

1.先看一下官网给的多选日历控件的实现代码

2.实现设置过期日期不可选择


1.先看一下官网给的多选日历控件的实现代码

     点这里进官网看实例     

实现效果:

 


可以发现,官网给的代码只能实现日期多选,并不能实现将过期的日期设置为不可选择

因此动手来改吧~~见小标题2

 

2.实现设置过期日期不可选择

对1.中官网给出的实例进行修改:

在设置里面加上一行代码minDate:new Date(),//过期时间不可选择

 

具体代码如下:

<script type="text/javascript">

$(function () {

$('#datetimepicker14').datetimepicker({

format:'L',//显示日期格式为月日年

minDate:new Date(),//过期时间不可选择

allowMultidate: true,//允许日期多选

multidateSeparator: ','//多个时间以逗号隔开

});

});

</script>

 

实现效果:可以看到,今日11号之前的日期变成了灰色,用户不可选择

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章