【笔记】bootstrap日期插件

朱雀 2020-10-14 12:21 916阅读 0赞

第一步：引入css

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/datetimepicker/css/bootstrap-datetimepicker.min.css" type="text/css" />

第二步：引入js和配置【建议在页面下方引入】

<script src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>【内部有过期的，建议版本高一点儿】
    <script src="${pageContext.request.contextPath }/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    
    <script type="text/javascript"> /* 日期插件 */ $('.form_datetime').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, }); $('.form_date').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); $('.form_time').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0 }); </script>

第三步：页面

<div class="form-group">
        <div class="input-group input-group-lg date form_date" data-date="" data-date-format="yyyy-MM-dd"  data-link-format="yyyy-mm-dd">
            <span class="input-group-addon" ><span id="my-glyphicon-lg" class="glyphicon glyphicon-calendar"></span></span>
            <input type="text" name="enrolTime" class="form-control" placeholder="Please enter the enrolTime"   title="请输入入学时间" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
        </div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，916人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 颜色和日期插件

BootCDN加速器： [https://www.bootcdn.cn/][https_www.bootcdn.cn] [![watermark_type_ZmFuZ3poZ

悠悠/ 2023年10月18日 17:13/ 0 赞/ 62 阅读

相关 bootstrap时间日期插件年度季度月度

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/0f4d515dba074cd

布满荆棘的人生/ 2022年09月14日 00:26/ 0 赞/ 198 阅读

相关 Bootstrap表格插件--bootstrap-table

一、简介 bootstrap-table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导

╰半橙微兮°/ 2022年06月04日 05:06/ 0 赞/ 330 阅读

相关 bootstrap 插件集

[bootstrap-growl][] [bootstrap-notify][] 这两个是简单易用的提示框插件,实现右上角弹窗 ![SouthEast][]

亦凉/ 2022年06月02日 12:13/ 0 赞/ 189 阅读

相关日期插件

原生的手机时间控件，需要使用input标签。通过控制input的type属性来控制显示。 1、type=’date’ //显示年、月、日 2、type=‘month’//

雨点打透心脏的1/2处/ 2022年05月13日 13:12/ 0 赞/ 406 阅读

相关 Bootstrap学习笔记（四）插件

小知识点：盲人、智力低下、行动障碍等H5标签中有两类属性与“无障碍阅读”相关： (1)<ANY role=""> <b role="button"></b

超、凢脫俗/ 2022年04月06日 13:01/ 0 赞/ 244 阅读

相关 Bootstrap 日期时间bootstrap-datetimepicker插件

下载地址及文档参考：[http://www.bootcss.com/p/bootstrap-datetimepicker/][http_www.bootcss.com_p_bo

Myth丶恋晨/ 2022年03月19日 01:18/ 0 赞/ 597 阅读

相关 bootstrap插件

（1）bootstrap-treeview：[https://github.com/jonmiles/bootstrap-treeview][https_github.com_

青旅半醒/ 2022年03月18日 03:24/ 0 赞/ 312 阅读

相关 bootstrap日期控件

[https://blog.csdn.net/qq\_33368846/article/details/82223676][https_blog.csdn.net_qq_333

向右看齐/ 2022年03月15日 07:22/ 0 赞/ 295 阅读

相关【笔记】bootstrap日期插件

bootstrap日期插件第一步：引入css 第二步：引入js和配置【建议在页面下方引入】第三步：页面

朱雀/ 2020年10月14日 12:21/ 0 赞/ 917 阅读