第二章 时间控件(DateTime Picker)

简介:   这家伙太懒了,碰到问题才写博文,嘿嘿。   好了进入正题,二话不说,先放地址:   中文:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm      http://www.malot.fr/bootstrap-datetimepicker/demo.php      http://www.malot.fr/bootstrap-datetimepicker/     今天碰到一个问题是这样的,时间控件显示小时分钟。

  这家伙太懒了,碰到问题才写博文,嘿嘿。

  好了进入正题,二话不说,先放地址:

  中文: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>

 

 

 

 

 

 

相关文章
|
iOS开发
uView的u-datetime-picker限制开始的年月日后ios显示不出来
uView的u-datetime-picker限制开始的年月日后ios显示不出来
293 0
element-使用el-date-picker 选择日期后返回周几(整理)
element-使用el-date-picker 选择日期后返回周几(整理)
|
C# 前端开发
WPF DatePicker默认显示当前日期,格式化为年月日
原文:WPF DatePicker默认显示当前日期 WPF的日历选择控件默认为当前日期,共有两种方法,一种静态,一种动态。 静态的当然写在DatePicker控件的属性里了,动态的写在对应的cs文件里,具体请看下面。
6480 0
|
4月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
145 1
|
12月前
|
JavaScript 前端开发 程序员
DatePicker 日期选择器,获取系统默认当前年月日
DatePicker 日期选择器,获取系统默认当前年月日
451 0
|
JavaScript
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
369 0
|
JavaScript API
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
1103 0
|
前端开发
前端工作总结296-uni-ele-el-date-picker限制选择时间
前端工作总结296-uni-ele-el-date-picker限制选择时间
119 0
前端工作总结296-uni-ele-el-date-picker限制选择时间
|
JavaScript 前端开发 API
纯手工打造的日期选择器 xy-date-picker 原理与使用
纯手工打造的日期选择器 xy-date-picker 原理与使用
纯手工打造的日期选择器 xy-date-picker 原理与使用