zoukankan      html  css  js  c++  java
  • Bootstrap的DateTimePicker时间选择器

    API: http://www.bootcss.com/p/bootstrap-datetimepicker/

    一、先配置显示信息和语言

    Html:

    <div class="row" id="VipSetUp" style="margin-top:5px;">
                                                    <div class="col-md-6" style="padding:0;">
                                                        <div class="input-group date form_date" style="margin-left:5%;96%" id="bengindate" data-data="" data-date-format="yyyy-MM-dd">
                                                            <span class="input-group-addon">启始日期</span>
                                                            <input class="form-control" id="benginText" type="text" value="" readonly>
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                        </div>
                                                    </div>
    
                                                    <div class="col-md-6" style="padding:0;">
                                                        <div class="input-group date form_date" style="margin-left:5%;90%;" id="enddate" data-data="" data-date-format="yyyy-MM-dd">
                                                            <span class="input-group-addon">截止日期</span>
                                                            <input class="form-control" type="text" id="endText" value="" readonly >
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                                        </div>
                                                    </div>
                                                </div>

    JS:

     $("#bengindate").datetimepicker({
            language: 'CC',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
        }).on('changeDate', function (e) {
            var BeginTime = $("#benginText").val();
            $("#enddate").datetimepicker("setStartDate", BeginTime);  //设置结束时间只能从开始时间选择起
        });
    
        $("#enddate").datetimepicker({
            language: 'CC',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    
        $("#benginText").val(nowdate);
        $("#endText").val(enddate);

  • 相关阅读:
    工作流二次开发之新增表单实践(二)
    layui表格及工作流二次开发实践(一)
    记一个递归封装树形结构
    SpringCloud微服务之宏观了解
    统一结果返回&统一异常处理
    mybatis-Plus 实践篇之CRUD操作
    修改MariaDB-root密码
    iftop-监控服务器实时带宽情况
    Wordpress安装-报错说明
    MariaDB忘记root密码
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7524614.html
Copyright © 2011-2022 走看看