码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap datetimepicker 复选可删除,可规定指定日期不可选

时间:2017-03-31 16:33:09      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:jquery   str   logs   orm   val   function   document   disable   ext   

可实现类似于酒店预订的功能。支持日期多选,日期重复选择取消等功能。

datetimepicker去网上下载 很多, 只需要取到

bootstrap-datetimepicker.min.js

bootstrap-datetimepicker.min.css

两个文件即可

JS:

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.0.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

script type="text/javascript">

$(document).ready(function() {
                var dateList=[];
                $("#datetimeStart").datetimepicker({
                    format: ‘yyyy-mm-dd‘,
                    minView: ‘month‘,
                    language: ‘zh-CN‘,
                    autoclose: true,
                    startDate: [‘2017-03-29‘],
                    datesDisabled:[‘2017-03-30‘],
                }).on("changeDate", function() {
//                    $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val())
                    alert("11");
                    var dateClicked = $("#datetimeStart").val();
                    if(dateList.indexOf(dateClicked)>-1){
                        alert("位置"+dateList.indexOf(dateClicked));
                        dateList.splice(dateList.indexOf(dateClicked),1);
                        alert("删除成功");
                    }else{
                    dateList.push($("#datetimeStart").val());
                    alert("222");
                    }alert("333");
                    $("#datelist").val(dateList);
                });
            });
</script>

 

HTML:

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime"> --
<input  size="16" type="text" id="datelist" readonly class="form_datetime"/>

 

bootstrap datetimepicker 复选可删除,可规定指定日期不可选

标签:jquery   str   logs   orm   val   function   document   disable   ext   

原文地址:http://www.cnblogs.com/duyunchao-2261/p/6651980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!