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 ...
随机推荐
- Linux 命令自动补齐快捷键
Linux 命令自动补齐快捷键 : TAB
- gpio模拟I2C,驱动pcf8574T
一.pcf8574T介绍 查看pcf8574T的数据手册, A表示读或写,当A为1的时候表示读,当A为0的时候表示写.现把地址控制线,即A2.A1.A0全部接地,可以得到读控制指令为0x41,写控制指 ...
- Azure IOT Edge
微软Build 2017大会,纳德拉表示,在计算力的飞速发展中,微软要做的就是将计算的能力赋权给普通用户,让技术为更多用户所用,让计算机视觉.文本理解等技术变得更加普惠(inclusive),同时构建 ...
- ANTS Performance Profiler和ANTS Memory Profiler
使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题 一.前言 最近一段时间,网站经常出现两个问题: ...
- Emacs的一些事情(与Vi的争议及使用)
一年成为Emacs高手(像神一样使用编辑器)推荐文章 http://ftp.gnu.org/gnu/emacs/windows/http://blog.csdn.net/redguardtoo/art ...
- RTB业务知识之2-Impression概念和关键属性
一.定义-impression This object describes an ad placement or impression being auctioned. A single bid re ...
- java中的强,软,弱,虚引用
引用的应用场景 我们都知道垃圾回收器会回收符合回收条件的对象的内存,但并不是所有的程序员都知道回收条件取决于指向该对象的引用类型.这正是Java中弱引用和软引用的主要区别. 如果一个对象只有弱引用指向 ...
- maven私服的使用
使用的版本是nexus2 比较犀利的一个博客https://www.cnblogs.com/tyhj-zxp/p/7605879.html 一.安装搭建私服(windows) bin目录cmd执行ne ...
- Hadoop错误集:Journal Storage Directory not formatted
类型一: 当你从异常信息中看到JournalNode not formatted,如果在异常中看到三个节点都提示需要格式化JournalNode. 如果你是新建集群,你可以重新格式化NameNode, ...
- MongDB备份error: boost::filesystem::create_directory
用dump 备份一直提示一个error "error: boost::filesystem::create_directory: The filename, directory name, ...