第二章時間コントロール(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の意味を見つけました。
料理が出ました
補足:2013-10-29
1.実現日の選択
主要コード:
補足:2013-11-29
生年月日
1.data-date、data-date-format、inputの日付フォーマットは一致していなければなりません。そうでないと、時間表示フォーマットが一致しないなどの小さな問題が発生します。
2.minView:'moneth'は、選択日を表示するパネルで、必要に応じて調整できます。
さて本題に入ります。何も言わずに住所を置いておきます。
日本語: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>