这家伙太懒了,碰到问题才写博文,嘿嘿。
好了进入正题,二话不说,先放地址:
中文: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: 'month',为显示选择日期的面板,可根据需要进行调整
<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>