一、用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、时间插件实现默认当天的时间和只能选择小于今天的日期的更多相关文章

  1. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  2. Mint-UI 的 DatetimePicker 日期时间插件的安装与使用

    简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...

  3. bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

    <!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...

  4. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  5. 项目中遇到angular时间插件datetinepicker汉化问题

    问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...

  6. bootstrap-datetimepicker时间插件

    bootstrap-datetimepicker时间插件 依赖的jar包 bootstrap的js和css jquery.js datetimepicker的js文件: bootstrap-datet ...

  7. Date Range Picker时间插件非常不错,主要体现在选择一个时间区间

    地址:http://www.daterangepicker.com/ demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event a ...

  8. bootstrap时间插件 火狐不显示 完美解决方法

    原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...

  9. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

随机推荐

  1. vue处理用户输入

    为了让用户和你的应用进行互动,可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法: <div id="app-5"> <p>{{ ...

  2. linux中的信号机制

    概述 Linux信号机制是在应用软件层次上对中断机制的一种模拟,信号提供了一种处理异步事件的方法,例如,终端用户输入中断键(ctrl+c),则会通过信号机制停止一个程序[1]. 这其实就是向那个程序( ...

  3. Linux CentOS 6.9 Minimal 编译 OpenJDK 7

    今天学习<深入理解Java虚拟机:JVM高级特性与最佳实践>一书,并动手在Linux系统上编译OpenJDK 7,初次搞不太顺利,特记录下编译操作细节. 一.前期准备 约定:工具默认安装目 ...

  4. [Full-stack] 快速上手开发 - React

    故事背景 [1] 博客笔记结合<React快速上手开发>再次系统地.全面地走一遍. [2] React JS Tutorials:包含了JS --> React --> Red ...

  5. Linux内核 GPIO操作部分API

    内核中关于GPIO的操作API主要集中在<linux/of_gpio.h>和<linux/gpio.h>中,前者主要是GPIO直接与设备树相关的操作,在Linux 设备树操作A ...

  6. modbus ASCII和MODBUS RTU区别

    下表是MODBUS ASCII协议和RTU协议的比较: 协议 开始标记 结束标记 校验 传输效率 程序处理 ASCII :(冒号) CR,LF LRC 低 直观,简单,易调试 RTU 无 无 CRC ...

  7. python web自动化测试中失败截图方法汇总

    在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法:   1.在tearDown中写入截图的 ...

  8. mysql8.0驱动问题

    <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</a ...

  9. 通过USB转TTL串口下载stm32程序

    目录: 1.硬件及其接线 2.驱动及软件 3.下载程序测试 1.硬件及其接线 1.1 USB转TTL刷机板(CH340模块升级小板) 1.2 主芯片STM32F103C8T6开发板 1.3接线 1.3 ...

  10. 堆的C语言实现

    在C++中,可以通过std::priority_queue来使用堆. 堆的C语言实现: heap.c /** @file heap.c * @brief 堆,默认为小根堆,即堆顶为最小. */ #in ...