bootstrap-datepicker实现日期input readonly 标签中选择时间功能
引用datepicker css,js,zh-CH文件
ps: 都是基于bootstrap,所以得先引入bootstrap文件才可以使用
<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script> // 日期显示会用到中文
js
<input readonly name="start-time" class="form-control choice-start-time" type="text" placeholder="开始时间">
<span>-</span>
<input readonly name="end-time" class="form-control choice-end-time" type="text" placeholder="结束时间">
// 选择时间事件
$(function () {
var today = new Date();
var todayStr = today.getFullYear() + '/' + (today.getMonth()+1)
+ '/' + today.getDate();
var option = {
'format': 'yyyy/mm/dd',
'autoclose': true,
'startDate': '2018/7/10',
'endDate': todayStr,
'language': 'zh-CN',
'todayBtn': 'linked', // 显示一个选择今日的按钮
'todayHighlight': true, // 当前日期是否高亮
'showButtonPanel': false, // 是否展示按钮
'clearBtn': true // 'startDate': '-3d'
};
$('input[name="start-time"]').datepicker(option);
$('input[name="end-time"]').datepicker(option);
});
bootstrap-datepicker实现日期input readonly 标签中选择时间功能的更多相关文章
- Bootstrap datepicker 在弹出窗体modal中不工作
解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- 第一篇-Html标签中head标签,body标签中input系列,textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- IOS 设置ios中DatePicker的日期为中文格式
设置ios中DatePicker的日期为中文格式 1.在模拟器中的“设置”-“通用”-“多语言环境”-“语言”设置为“简体中文”, 2.“区域格式”设置为“中国”.
- LI 标签中让文章标题左对齐,日期右对齐的方法
希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html ...
- input标签中的name
<input>标签是java web的jsp页面中最常用的标签,特别是用来在页面和servlet中传递内容, 但是我们看到<input>标签中有很多内容,这边我们只提一下主要的 ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- 在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...
随机推荐
- C#:单元测试(VS2015)
根据VS2015的提示,仅支持在共有类或共有方法中支持创建单元测试.所以,如果我们要测试私有或是保护的类和方法,是要先将他们暂时设定成公有类型. 在VS2015中创建单元测试,只要在我们想测试的地方点 ...
- 12c R2 RAC Oracle Linux 7.3 ESXI6.5
环境:ESXI6.5虚拟化 主机配置:操作系统 Oracle Linux 7.3 CPU:8个VCPU 内存:16G 本地磁盘:50G 全程默认最小化安装Oracle Linux 7.3操作系统 每个 ...
- Java MyBatis insert数据库数据后返回主键
<selectKey keyProperty="id" resultType="java.lang.Long" order="AFTER&quo ...
- php each和list的用法
each与list的用法(PHP学习) 1.each的用法 先看API array each ( array &$array ) api里是这么描述的:each — 返回数组中当前的键/值对并 ...
- ALGO-125_蓝桥杯_算法训练_王、后传说(DFS)
问题描述 地球人都知道,在国际象棋中,后如同太阳,光芒四射,威风八面,它能控制横.坚.斜线位置. 看过清宫戏的中国人都知道,后宫乃步步惊心的险恶之地.各皇后都有自己的势力范围,但也总能找到相安无事的办 ...
- 【Docker】docker常用指令
开启docker,并设置开机自启动 老式写法: service docker start chkconfig docker on 新式写法: systemctl start docker.servic ...
- 2、以自定义struct或struct指针作为map的Key
若干问题: struct Node { int k, b; friend bool operator <(Node a, Node b) { return a.k < b.k; } }no ...
- Apple公司Darwin流式服务器源代码分析
当前,伴随着Internet的飞速发展,计算机网络已经进入到每一个普通人的家庭.在这个过程中,一个值得我们关注的现象是:Internet中存储和传输内容的构成已经发生了本质的改变,从传统的基于文本或少 ...
- Android开发教程之【环境搭建及HelloWorld】(转载)
引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...
- java浅析final关键字
谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...