美文网首页
bootstrap 时间控件

bootstrap 时间控件

作者: _daraDu | 来源:发表于2018-09-15 14:34 被阅读0次

    bootstrap日期时间表单组件
    http://www.bootcss.com/p/bootstrap-datetimepicker/
    https://blog.csdn.net/hizzyzzh/article/details/51212867

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/scripts/bootstrap/datetimepicker/bootstrap-datetimepicker.min.css'/>" />
    <script type="text/javascript" src="<c:url value='/scripts/bootstrap/datetimepicker/bootstrap-datetimepicker.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/bootstrap/datetimepicker/bootstrap-datetimepicker.zh-CN.js'/>"></script>
    
    <!--开始时间-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
              <label for="obj-begin-time" class="weui-label">开始时间:</label>
        </div>
        <div class="weui-cell__bd" style='position:relative;'>
            <input type="text" class="form-control" id="obj-begin-time">
            <span class='clearTime' onclick='clearBeginTime()'>X</span>
        </div>
    </div>
    <!--结束时间-->
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="obj-end-time" class="weui-label">结束时间:</label>
        </div>
        <div class="weui-cell__bd" style='position:relative;'>
            <input type="text" class="form-control" id="obj-end-time">
            <span class='clearTime' onclick='clearEndTime()'>X</span>
        </div>
    </div>
    
    //初始化时间输入框
    $('#obj-begin-time').datetimepicker({
       format: 'yyyy-mm-dd hh:ii:ss',
       autoclose: 1,
       todayHighlight: 1,//今天高亮
       todayBtn: true,
       language:'zh-CN'
    }).on("click",function(){
       $("#obj-begin-time").datetimepicker("setEndDate",$("#obj-end-time").val())
    });
    $('#obj-end-time').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
         autoclose: 1,//选择后自动关闭
         todayHighlight: 1,//今天高亮
         todayBtn: true,
         language:'zh-CN'
        //startDate:new Date()  //日历开始时间
     }).on("click",function(){
          $("#obj-end-time").datetimepicker("setStartDate",$("#obj-begin-time").val())
    });
    //清空所选时间
    function clearBeginTime(){
          $('#obj-begin-time').val("")
    }
    
    /*格式 2018-10-10(选取到年月日)*/
    $('#obj-end-time').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
         autoclose: 1,//选择后自动关闭
         todayHighlight: 1,//今天高亮
         todayBtn: true,
         startView: 'month',
         minView:'month',
         maxView:'decade',
         language:'zh-CN'
        //startDate:new Date()  //日历开始时间
     })
    

    相关文章

      网友评论

          本文标题:bootstrap 时间控件

          本文链接:https://www.haomeiwen.com/subject/seazgftx.html