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 ...
随机推荐
- ubuntu下pycharm调用Hanlp实践分享
前几天看了大快的举办的大数据论坛峰会的现场直播,惊喜的是hanlp2.0版本发布.Hanlp2.0版本将会支持任意多的语种,感觉还是挺好的!不过更多关于hanlp2.0的信息,可能还需要过一段时间才能 ...
- [转]Python中yield的解释
转自: http://python.jobbole.com/83610/ 本文作者: 伯乐在线 - wklken .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 翻译 来源于stackover ...
- mac home目录创建文件夹,修改权限
mac 是基于unix, 自带就有home目录,但是为空.home目录的默认所属用户是root wheel,mac默认的root账号所属用户是root admin,所以root也无法在home目录下创 ...
- minicom的安装及配置
1. sudo apt-get install minicom 2. 配置 (1). sudo minicom –s (2). (3). 按“A”配置设备,再按回车保存.按”F”,把留空改为NO.回车 ...
- 【转】前端Web开发MVC模式-入门示例
前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...
- 直接突破百度网盘,用IDM或者迅雷下载。
直接突破百度网盘,用IDM或者迅雷下载.推荐浏览器: 360 ,CHORME360,: 打开网盘下载页,然后F12→找到CONSOLE→刷新→输入代码“Object.defineProperty(th ...
- 【枚举类型】Restful API请求--转换String为枚举类型
IBaseEnum.java public interface IBaseEnum { public String getName(); } FuncEnum.java import com.sssl ...
- 【Java安装】配置环境变量
添加环境变量: JAVA_HOME D:\Program Files\Java\jdk1.8.0_131 classpath: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...
- PAT 乙级 1070 结绳(25) C++版
1070. 结绳(25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一段一段的绳子,你需要把它们串成一条 ...
- computer、methods和watch
在vue中处理复杂的逻辑的时候,我们经常使用计算属性computer,但是很多时候,我们会把计算属性.方法和侦听器搞混淆,在 w3cplus.com的一篇文章中是这样总结这三者的. methods:正 ...