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 ...
随机推荐
- Spring Cloud(Dalston.SR5)--Eureka 服务消费
服务被注册.发布到 Eureka 服务器后,需要有程序去发现他,并且进行调用,称为服务消费,一个服务可能会部署多个实例,调用过程可能涉及负载均衡.服务器查找等问题,这些问题 Netflix 项目已经帮 ...
- DevOps需要的工具
DevOps需要的工具: 代码管理(SCM):GitHub.GitLab.BitBucket.SubVersion 构建工具:Ant.Gradle.maven 自动部署:Capistrano.Code ...
- sqlalchemy操作----建表 插入 查询 删除
... #!_*_coding:utf-8_*_ #__author__:"Alex huang" import sqlalchemy from sqlalchemy import ...
- 微信开发-业务域名、JS接口安全域名、网页授权域名
在微信公众平台上可配置这些域名. 1.业务域名:在微信浏览器中点击文本框,会弹出下面的提示,很不爽,通过配置业务域名可以将该提示去掉 2.JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要 ...
- Azure ARM (22) 使用Azure PowerShell创建Azure RM VM
<Windows Azure Platform 系列文章目录> 在Azure China获得VM Image,可以执行下面的脚本. Get-AzureRmVMImagePublisher ...
- %cd% 与 %~dp0% 区别
@echo off echo path:%~dpnx0% ipconfig /all|findstr "\<IPv4 适配器\>" %cd% 在批处理和命令窗口都能使 ...
- PREV-9_蓝桥杯_大臣的旅费
问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大城市都能从首 ...
- Lucene suggest [转]
The Big Data Zone is presented by Splunk, the maker of data analysis solutions such as Hunk, an an ...
- 我的ehcache笔记
我的EhcacheUtils类: package com.shinho.bi.utils; import org.ehcache.CacheManager; import org.ehcache.co ...
- 【C#】C#操作Excel文件(转)
实现C#与Excel文件的交互操作,实现以下功能: 1.DataTable 导出到 Excel文件 2.Model数据实体导出到 Excel文件[List<Model>] 3.导出数据到模 ...