zoukankan      html  css  js  c++  java
  • bootstrap datetimepicker 复选可删除,可规定指定日期不可选

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

    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"/>
  • 相关阅读:
    如何检测浏览器url变化
    nodejs学习笔记 —— 异步编程解决方案
    进程和线程总结
    angular 表达式与指令
    angular 依赖注入
    grunt 插件开发注意事项
    vmstat & mpstat & w
    css 常用布局属性解释
    前端面试题
    移动端尺寸
  • 原文地址:https://www.cnblogs.com/duyunchao-2261/p/6651980.html
Copyright © 2011-2022 走看看