第二章時間コントロール(DateTime Picker)

8366 ワード

こいつは怠け者で、問題があったらブログを書きます。
さて本題に入ります。何も言わずに住所を置いておきます。
日本語:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
     http://www.malot.fr/bootstrap-datetimepicker/demo.php
     http://www.malot.fr/bootstrap-datetimepicker/
 
今日問題があったのは時間コントロールの表示時間は時間分です。死んで決めました。全部英語です。昼を探してやっとstartViewの意味を見つけました。
料理が出ました
  
@Styles.Render("~/Content/themes/default/bootstrap-datetimepicker.css")
@Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
@Scripts.Render("~/Scripts/bootstrap-datetimepicker.zh-CN.js")

<div class="container" style="padding: 0 15px;"> <small> </small> <input type="text" id="datetimepicker"> </div> <script type="text/javascript"> $(function () { $('#datetimepicker').datetimepicker({ format: 'hh:ii', startView:1 }); }); </script>
効果図:
 
補足:2013-10-29
1.実現日の選択
主要コード:
$('#datetimepicker').datetimepicker({ 
  minView:
"month", // ,
  format:
"yyyy-mm-dd", // ,
  language:
'zh-CN', //
  autoclose:
true //
});
 
 補足:2013-11-29
生年月日
1.data-date、data-date-format、inputの日付フォーマットは一致していなければなりません。そうでないと、時間表示フォーマットが一致しないなどの小さな問題が発生します。
2.minView:'moneth'は、選択日を表示するパネルで、必要に応じて調整できます。
<div class="form-group  col-md-6">

    <label class="control-label col-md-4">

            </label>

    <div class="col-md-8">

        <div id="BirthDiv" class="input-group date form_datetime" data-date="@Model.BirthDT.ToString("yyyy-MM-dd")" data-date-format="yyyy-mm-dd" >

             @Html.TextBox("BirthDT", Model.BirthDT.ToString("yyyy-MM-dd"), new { @class = "form-control " })

             <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>

         @Html.ValidationMessageFor(t => t.BirthDT, null, new { @class = "help-block" })

    </div>

 </div>

 <script type="text/javascript">

        $(function () {

            $('#BirthDiv').datetimepicker({

                language: 'zh-CN',

                autoclose: 1,

                todayBtn: 1,

                pickerPosition: "bottom-left",

                minuteStep: 5,

                format: 'yyyy-mm-dd',

                minView: 'month'    //                       。

            });

        });

    </script>