1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期
一、用datetimepicker插件实现限定时间范围的选择
1、下面是要实现的效果图,让开始时间只能从 2018-7-1 到 2018-7-7 选择。

2、html的结构
<div class="input-append input-group" id="beginTimeDiv">
<input type="text" class="form-control" data-format="yyyy-MM-dd" placeholder="开始日期" disabled id="beginTime" name="beginTime" />
<span class="input-group-addon add-on">
<i data-time-icon="glyphicon glyphicon-time" data-date-icon="fa fa-calendar"></i>
</span>
</div>
3、js代码
$('#beginTimeDiv').datetimepicker('setStartDate',new Date("2018,7,2"));// 2018,7,1 号能点击,要传入比开始的日期多一天
$('#beginTimeDiv').datetimepicker('setEndDate',new Date("2018,7,7"));
二、时间插件实现默认当天的时间
1、要实现的效果,假设当前时间是 2019-04-13,想要默认成 前天 的时间。且只能选择小于今天的日期

2、html结构
<div class="input-group input-append date datapick BeginTimeDiv">
<input type="text" class="form-control input-sm" id="BeginTime" name="BeginTime" placeholder="请输入日期" data-format="yyyy-MM-dd">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
3、js代码如下
// ①默认成当天的日期
$('.BeginTimeDiv').datepicker("setDate", "-1d");//增加时间控件,-1d减少一天,-1m减少一个月,-1y减少一年
$(".BeginTimeDiv").datepicker("setDate", "null"); // null 代表着当天
$('.BeginTimeDiv').datepicker("setDate", "-1y,-1m,-1d");// 代表这个 年,月,日,各减少一个数字
// ②选择小于当天的日期
$('#BeginTime').datepicker({
autoclose:true,//选中日期后日期框自动消失
clearBtn:true,//提供清除按钮,可以清除input框中日期
language:"zh",//日期框显示语言
orientation:"top",//日期框显示位置
todayBtn:false,//是否显示今天按钮
endDate:"-1d" //小于当天的日期的设置 endDate: new Date() 今天的日期和以前的能选择
});
1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期的更多相关文章
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- Mint-UI 的 DatetimePicker 日期时间插件的安装与使用
简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...
- bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件
<!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- 项目中遇到angular时间插件datetinepicker汉化问题
问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...
- bootstrap-datetimepicker时间插件
bootstrap-datetimepicker时间插件 依赖的jar包 bootstrap的js和css jquery.js datetimepicker的js文件: bootstrap-datet ...
- Date Range Picker时间插件非常不错,主要体现在选择一个时间区间
地址:http://www.daterangepicker.com/ demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event a ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
随机推荐
- linq 把list分组为 List<List>
public class User { public int UserID { get; set; } public string UserName { get; set; } public int ...
- Redhat6.5——解决yum功能不能正常使用
以前或多或少接触过linux服务器,由于是服务器上的,很多东西也没去玩过.要想多研究,还是得自己弄一个linux系统.由于正常工作,还是接触windows更多,双系统显然没有那么方便,所以决定弄个虚拟 ...
- win8 下 TortoiseSVN 不显示图标
如果你安装 TortoiseSVN 之后,功能使用正常,但是文件夹或文件左上角就是不显示图标,那么你可能 1. 64bit 系统上装了 32bit 的 TortoiseSVN 解决方法是,再安装 64 ...
- IOC容器特性注入第六篇:利用MVC注入点,把容器启动
这里是利用MVC三个注入点中的:IDependencyResolver 进行注入 在全局类中Global.asax代码如下: #region MVC Inject System.Web.Mvc.Dep ...
- [Hinton] Neural Networks for Machine Learning - Hopfield Nets and Boltzmann Machine
Lecture 11 — Hopfield Nets Lecture 12 — Boltzmann machine learning Ref: 能量模型(EBM).限制波尔兹曼机(RBM) 高大上的模 ...
- 【ArcGIS】栅格分析-问题之001(转)
在arcgis中进行栅格计算时,碰到这样的错误ERROR 000539:Error running expression:rcexec()<type 'exceptions.ValueError ...
- PHP在linux读取word文档
几天帮朋友解决一个技术问题,在Linux下,将word文档中的内容读取,然后使用正则匹配,拼成sql入库 查阅了外文资料和google之后,步骤如下: #wget http://www.winfiel ...
- 在WPS中删除整行的快捷键是什么?
选中需要删除的行,(方法:点击最左侧的行号):按快捷键Ctrl+-(按着Ctrl不放,再按小键盘的减号“-”),“-”是删除,“+”是插入,选中行,是对行操作,选中列就是对列操作,选中单元格,就是单元 ...
- ASP.NET MVC与ASP.NET Web Form简单区别
概论: Asp.net 微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...
- linux如何查看某个端口是否开放
1.你可以使用 lsof 命令来查看某一端口是否开放.查看端口可以这样来使用,我就以80端口为例: lsof -i:80 或者 lsof -i:22如果有显示说明已经开放了,如果没有显示说明没有开放 ...