第二章 时间控件(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显示不出来
346 0
|
JSON JavaScript Unix
多种方式解决EasyUI—DataGrid中DateTime的格式化问题
多种方式解决EasyUI—DataGrid中DateTime的格式化问题
501 0
多种方式解决EasyUI—DataGrid中DateTime的格式化问题
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
4983 0
|
14天前
|
前端开发 UED 开发者
React 日期时间选择器 (DateTime Picker): 从基础到高级
本文详细介绍了如何在React应用中集成日期时间选择器,重点讲解了`react-datepicker`和Material-UI的`DatePicker`组件的安装、基本用法、自定义日期格式和设置日期范围的方法。同时,文章还探讨了常见问题及其解决方法,帮助开发者避免易错点,确保在项目中顺利集成日期时间选择功能。
49 3
|
5月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
173 1
|
JavaScript 前端开发 程序员
DatePicker 日期选择器,获取系统默认当前年月日
DatePicker 日期选择器,获取系统默认当前年月日
503 0
|
JavaScript API
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
1172 0
|
前端开发
前端工作总结296-uni-ele-el-date-picker限制选择时间
前端工作总结296-uni-ele-el-date-picker限制选择时间
123 0
前端工作总结296-uni-ele-el-date-picker限制选择时间
|
JavaScript 前端开发 API
纯手工打造的日期选择器 xy-date-picker 原理与使用
纯手工打造的日期选择器 xy-date-picker 原理与使用
纯手工打造的日期选择器 xy-date-picker 原理与使用