日期框时间框选择

来源：互联网发布：收银员练习软件编辑：程序博客网时间：2024/05/18 00:45
采用Bootstrap框架
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>        优化    </title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="/resources/css/bootstrap.css"/>    <link rel="stylesheet" href="/resources/css/bootstrap.min.css"/>    <link rel="stylesheet" href="/resources/css/bootstrap-theme.css"/>    <link rel="stylesheet" href="/resources/css/bootstrap-theme.min.css"/>    <link rel="stylesheet" href="/resources/css/bootstrap-datetimepicker.css"/>    <link rel="stylesheet" href="/resources/css/bootstrap-datetimepicker.min.css"/>    <script type="text/javascript" src="/resources/js/common/jquery-3.2.1.js"></script>    <script type="text/javascript" src="/resources/js/common/jquery-3.2.1.min.js"></script>    <script type="text/javascript" src="/resources/js/layer_new/layer.js"></script>    <script type="text/javascript" src="/resources/js/layer/layer.min.js"></script>    <script type="text/javascript" src="/resources/js/common/utils.js"></script>    <script type="text/javascript" src="/resources/js/common/bootstrap.min.js"></script>    <script type="text/javascript" src="/resources/js/common/bootstrap.js"></script>    <script type="text/javascript" src="/resources/js/common/bootstrap-datetimepicker.js"></script>    <script type="text/javascript" src="/resources/js/common/bootstrap-datetimepicker.min.js"></script>    <script type="text/javascript" src="/resources/js/common/bootstrap-datetimepicker.zh-CN.js"></script>    <script type="text/javascript" src="/resources/js/common/utils.js"></script>    <script type="text/javascript" src="/resources/js/page/optimizationJob.js"></script></head><body><div class="container">    <form action="" class="form-horizontal"  role="form">        <fieldset>            <legend>Test</legend>            <div class="form-group">                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">                    <input class="form-control" size="16" 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-th"></span></span>                </div>                <input type="hidden" id="dtp_input1" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">                    <input class="form-control" size="16" 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>                <input type="hidden" id="dtp_input2" value="" /><br/>            </div>            <div class="form-group">                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">                    <input class="form-control" size="16" 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-time"></span></span>                </div>                <input type="hidden" id="dtp_input3" value="" /><br/>            </div>        </fieldset>    </form></div><script type="text/javascript">    $('.form_datetime').datetimepicker({        //language:  'fr',        weekStart: 1,        todayBtn:  1,        autoclose: 1,        todayHighlight: 1,        startView: 2,        forceParse: 0,        showMeridian: 1    });    $('.form_date').datetimepicker({        language:  'zh-CN',        weekStart: 1,        todayBtn:  1,        autoclose: 1,        todayHighlight: 1,        startView: 2,        minView: 2,        forceParse: 0    });    $('.form_time').datetimepicker({        language:  'fr',        weekStart: 1,        todayBtn:  1,        autoclose: 1,        todayHighlight: 1,        startView: 1,        minView: 0,        maxView: 1,        forceParse: 0    });</script></body></html>
参考
http://www.bootcss.com/p/bootstrap-datetimepicker/
阅读全文
0 0