123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
- <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <div class="container">
- <form action="" class="form-horizontal">
- <fieldset>
- <legend>Test</legend>
- <div class="control-group">
- <label class="control-label">DateTime Picking</label>
- <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
- <input size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- </div>
- <input type="hidden" id="dtp_input1" value="" /><br/>
- </div>
- <div class="control-group">
- <label class="control-label">Date Picking</label>
- <div class="controls input-append date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
- <input size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- </div>
- <input type="hidden" id="dtp_input2" value="" /><br/>
- </div>
- <div class="control-group">
- <label class="control-label">Time Picking</label>
- <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
- <input size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- </div>
- <input type="hidden" id="dtp_input3" value="" /><br/>
- </div>
- <hr />
-
- <div class="control-group">
- <label class="control-label">Date 年</label>
- <div class="controls input-append date form_date_year" data-date="" >
- <input size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- </div>
- <input type="hidden" id="dtp_input_year" value="" /><br/>
- </div>
- <div class="control-group">
- <label class="control-label">Date 月</label>
- <div class="controls input-append date form_date_Moth" data-date="" >
- <input size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- </div>
- <input type="hidden" id="dtp_input_Moth" value="" /><br/>
- </div>
- <div class="control-group">
- <label class="control-label">Date 日</label>
- <div class="controls input-append date form_date_day" data-date="" >
- <input id="form_date_day" size="16" type="text" value="" readonly>
- <span class="add-on"><i class="icon-remove"></i></span>
- <span class="add-on"><i class="icon-th"></i></span>
- <button class="btn" onclick="alert($('#form_date_day').val())">获取值</button>
- </div>
- <input type="hidden" id="dtp_input_day" value="" /><br/>
- </div>
- </fieldset>
- </form>
- </div>
- <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
- <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
- <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
- <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
- <script type="text/javascript">
- $('.form_datetime').datetimepicker({
- //language: 'zh-CN',
- 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: 'zh-CN',
- weekStart: 1,
- todayBtn: 1,
- autoclose: 1,
- todayHighlight: 1,
- startView: 1,
- minView: 0,
- maxView: 1,
- forceParse: 0
- });
- //--------
- $('.form_date_year').datetimepicker({
- format: "yyyy",
- weekStart: 1,
- todayHighlight: 1,
- autoclose: true,
- todayBtn: true,
- startView: 4,
- minView: 4,
- language:'zh-CN',
- pickerPosition:"bottom-left"
- });
- $('.form_date_Moth').datetimepicker({
- format: "yyyy-mm",
- weekStart: 1,
- todayHighlight: 1,
- autoclose: true,
- todayBtn: true,
- startView: 3,
- minView: 3,
- language:'zh-CN',
- pickerPosition:"bottom-left"
- });
- $('.form_date_day').datetimepicker({
- format: "yyyy-mm-dd",
- weekStart: 1,
- todayHighlight: 1,
- autoclose: true,
- todayBtn: true,
- startView: 2,
- minView: 2,
- language:'zh-CN',
- pickerPosition:"bottom-left"
- });
- </script>
- </body>
- </html>
|