关闭

bootstrap:时间选择器datetimepicker调用

标签: bootstrapdatetimepicker时间选择器弹不出来
1371人阅读 评论(0) 收藏 举报
分类:

bootstrap-datetimepicker下载地址 http://www.bootcss.com/p/bootstrap-datetimepicker/


在index.html文件里有三种不同类型选择器,选择格式分别为xxxx-xx-xx xx:xx(年月日时间)和xxxx-xx-xx(年月日)以及xx:xx(时间)


以第一种时间选择器为例:

<div class="form-group">

<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
        <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
        <input class="form-control" size="16" type="text" value="" readonly>
                <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>
input type="hidden" id="dtp_input1" value="" /><br/>

</div>


调用方法:两个方面都要做到

(1)使用datetimepicker方法

$('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
        showMeridian: 1

});

上述选项(如weekStart)使用说明地址在 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm  选项导航下


(2)引入必要文件

<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

一定注意的是:上述要引用的文件要放在引用的jquery文件后才可以,否则很可能会引起选择器弹不出来的情况



举一个实际开发中引用顺序:

<script src="../bootstrap/js/jquery-1.10.2.js"></script>(任意版本jquey好像不影响调取结果)
<!-- BOOTSTRAP SCRIPTS  -->
<script src="../bootstrap/js/bootstrap.js"></script>
<!-- CUSTOM SCRIPTS  -->
<script src="../bootstrap/js/custom.js"></script>

<script src="../bootstrap/bootstrap-datetimepicker.js"></script>(必要文件)
<script src="../bootstrap/bootstrap-datetimepicker.fr.js"></script>(必要文件)

<script type="text/javascript">(datetimepicker方法)
    $('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        format:'yyyy-mm-dd hh:00:00'
    });
</script>






0
0
查看评论

bootstrap日期时间控件

datetime控件Bootstrap的日期时间控件,使用非常的简单。首先,添加日期时间控件的引用@*datetime控件*@ <link href="~/Content/BootStrap/css/bootstrap-datetimepicker.min.css"...
  • nangeali
  • nangeali
  • 2017-05-02 10:03
  • 13201

Bootstrap3 datetimepicker控件的使用

Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 缺点:    目前没有中文包,只有英文版 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:...
  • u011127019
  • u011127019
  • 2016-06-21 09:51
  • 61829

bootstrap-datetimepicker日期时间选择器的使用方法注意

官网下载的文档并没有太多详细的介绍如何使用,而且下载到的文件本地测试时其实并没有官网的效果,这里简单介绍下在本地建个简单的页面做到官网显示的截图效果: 直接贴代码:             ...
  • wjtlht928
  • wjtlht928
  • 2015-04-02 14:13
  • 8479

bootstrap之datetimepicker(日期时间选择器)插件详细使用方法

1.基础 datetimepicker是bootstrap中的一款日期和时间选择器,其使用和配置方法较为简单
  • u011536192
  • u011536192
  • 2017-08-02 20:41
  • 2364

BootStrap 表单时间选择器

前言  在大多数项目中 用户界面的时间选择是必不可少的,在项目的用户体验友好度这个大前提下,不让用户自己输入时间就显得格外的重要。而且用户输入时间还会存在格式不固定的问题,加大后台的开发量。 在这个时候就需要用到时间输入插件了,格式由我们自己设置,还减少了用户的输入环节提高了用户体验友好度使用bo...
  • bestfeng1020
  • bestfeng1020
  • 2017-05-09 10:48
  • 1763

bootstrap日期时间选择器datepicker的使用

datepicker的官网地址:http://bootstrap-datepicker.readthedocs.io/en/latest/index.html除了引入bootstrap.css和bootstrap.js外,还要引入: 1.<link rel="stylesheet&...
  • m0_37359464
  • m0_37359464
  • 2017-04-23 01:40
  • 884

bootstrap datetimepicker 选择月份 选择年

直接上代码: //选择年月日的 startView: 2, minView: 2, format: 'yyyymmdd', $('#datetimepicker').datetimepicker({ format: 'yyyymmdd'...
  • feng1603
  • feng1603
  • 2014-12-11 17:24
  • 47460

bootstrap 时间选择器

地址路径: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm                    ...
  • qq_26329981
  • qq_26329981
  • 2016-02-18 09:11
  • 2654

bootstrap的日期选择器

首先导入js和css文件 添加input文本框 添加js代码 $(function () { $("#datetime").datetimepic...
  • jewely
  • jewely
  • 2017-09-02 11:57
  • 526

bootstrap 日期控件起始日期&结束日期相互约束

引入控件使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js 详情及文件可以通过下面地址下载:http://www.bootcss.com/p/bootstrap-datetim...
  • wo541075754
  • wo541075754
  • 2016-04-22 16:42
  • 15663
    个人资料
    • 访问:9390次
    • 积分:311
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:0篇
    • 译文:1篇
    • 评论:0条
    文章分类