bootstrap-datetimepicker实现只显示到日期的方法

2024-10-22 14:34:55

本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法。分享给大家供大家参考，具体如下：

bootstrap-datetimepicker 一般都是设置到时分秒，有时候并不需要，怎么处理呢？

minView: "month", //选择日期后，不会再跳转去选择时分秒

1.引入

<link href="Public/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="{sh::PUB}js/jquery-1.10.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="{sh::PUB}css/bootstrap-datetimepicker.min.css">
<script src="{sh::PUB}js/bootstrap-datetimepicker.min.js" type="text/javascript" /></script>
<script src="{sh::PUB}js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" /></script>

2.配置

// 日历
$('.form_datetime').datetimepicker({
  minView: "month", //选择日期后，不会再跳转去选择时分秒
  language: 'zh-CN',
  format: 'yyyy-mm-dd',
  todayBtn: 1,
  autoclose: 1,
});

3.html

<div class="form-group row">
  <div class="left col-xs-3 text-right">
    <label for="">*时间:</label>
  </div>
  <div class="right col-xs-6 text-left">
    <div class="input-group">
     <input type="text" class="form-control form_datetime" id="addtime" name="addtime" value="{sh:$info.addtime|default=$time|date='Y-m-d',###}" placeholder="">
     <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
    </div>
  </div>
</div>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

bootstrap datetimepicker实现秒钟选择下拉框

bootstrap datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:'yyyy-mm-dd hh:ii:ss',会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟. 本示例修改bootstrap datetimepicker源代码,如果配置了显示秒钟format:'......ss',将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下 bootstrap datetimepicke
angularjs封装bootstrap时间插件datetimepicker

背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任
Bootstrap3 datetimepicker控件使用实例

Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:https://github.com/moment/moment datetimepi
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件.在Angular Bootstrap UI中有一个类似的控件TimePicker,但是它并没有深入到分钟和秒的精度. 因此,决定参考它的源码然后自己进行实现. 最终的效果如下: 首先是该directive的定义: app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSecon
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script
bootstrap datetimepicker日期插件使用方法

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css"> <script src="Js/bootstrap-datetimepicker.js"></script> 想用中文显示,加入bo
angular bootstrap timepicker TypeError提示怎么办

angular bootstrap timepicker TypeError: Cannot set property '$render' of undefined,如何解决? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="styl
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;
bootstrap datetimepicker日期插件超详细使用方法介绍

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" > <script src="Js/bootstrap-datetimepicker.js&q
AngularJs中Bootstrap3 datetimepicker使用实例

关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div

bootstrap-datetimepicker实现只显示到日期的方法

相关推荐

随机推荐