首先要引入js文件和css文件

<script src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.js"></script>
<script src="daterangepicker.js"></script> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"rel="stylesheet">

下面是div部分:

<div class="col-xs-12"><!--日期查询组件-->
<label class="col-sm-1 control-label tj">发布时间:</label>
<div class="col-xs-4 tj">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" readonly style="width: 200px" name="reservation" id="reservation"
class="form-control" value="请选择查询日期" />
</div> </div>
</div>
</fieldset>
</form>
</div>
</div>

最后是JS部分:

 <script type="text/javascript">
//日期查询js组件
$(document).ready(function() {
$('#reservation').daterangepicker(null, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
}); var rqstart = "";
var rqend = "";
//日期时间方法
$(document).ready(function() {
$('input[name="reservation"]').daterangepicker(
{
/*format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'*/
},
function(start, end, label) {
//alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
start = start.format('YYYY-MM-DD');//.format()把任意数据转换成字符串
end = end.format('YYYY-MM-DD'); /* 开始结束时加*/
rqstart = start;
rqend = end; }
);
}); </script>

效果如上图所示

JavaScript实现时间查询的更多相关文章

  1. sql时间查询的问题

    今天在做一个时间查询的时候遇到一个问题,就是获取的时间是 数据库的存储是这样的2016-10-29 12:11:40    2016-10-31 15:00:05 ... $log=M('table' ...

  2. Javascript实现Linq查询方式

    Linq是.net平台一个重要的技术,全称Language Integrated Query.通过构建快速查询语句,可快速从数据库或集合中筛选数据集.以查询数据库相同的方式操作内存数据. 在ECMAS ...

  3. mysql根据时间查询前一天数据

    MySql数据库如何根据时间查询前一天的数据?本文整理了几个解决方法,有需要的朋友参考下.   本节内容:用MySql怎么根据时间查询前一天的数据. 例1: 代码示例: select * from t ...

  4. Java和JavaScript的时间互传

    原创文章,转载请注明:Java和JavaScript的时间互传 By Lucio.Yang 1.从JavaScript到Java JavaScript: function query(){ var s ...

  5. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  6. ThinkPHP 数据库操作(四) : 聚合查询、时间查询、高级查询

    聚合查询 在应用中我们经常会用到一些统计数据,例如当前所有(或者满足某些条件)的用户数.所有用户的最大积分.用户的平均成绩等等,ThinkPHP为这些统计操作提供了一系列的内置方法,包括: 用法示例: ...

  7. 【Elasticsearch】ES中时间查询报错:Caused by: ElasticsearchParseException[failed to parse date field [Sun Dec 31 16:00:00 UTC 2017] with format [yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis]];

    ES中时间查询报错:Caused by: ElasticsearchParseException[failed to parse date field [Sun Dec 31 16:00:00 UTC ...

  8. 在数据库中(Oracle),根据时间查询数据: to_date()和to_char()函数

    1. to_date() 函数 1.1 格式 to_date("要转换的字符串","转换的格式")   //两个参数的格式必须匹配,否则会报错.即按照第二个参数 ...

  9. SuperMap iClient for JavaScript 之关联查询

    人们常说,计划赶不上变化.同样的,在项目中,使用的数据也是在不断变化的,尤其是属性信息的改变.就比如说,地图上的地物,它的空间信息在比较长的时间内,都不会发生变化,他的属性信息在初期不完整或者与后来的 ...

随机推荐

  1. Django url分发器

    视图: 视图一般都写在app的views.py中.并且视图的第一个参数永远都是request(一个HttpRequest)对象.这个对象存储了请求过来的所有信息,包括携带的参数以及一些头部信息等.在视 ...

  2. VS 插件 Productivity Power Tools - 更改 选项卡组件位置

    Visual Studio 2013怎么把选项卡设置在左侧显示?vs中选项卡默认显示在顶部,但是更习惯显示在左侧,该怎么设置呢?为了更方便使用,下面分享VS2013选项卡设置在左侧显示的图文教程 Vi ...

  3. vue实现城市列表选择

    成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细 ...

  4. ubuntu 下配置elasticSearch

    配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件  tar –xzvf  文件.tar.gz Vim /etc/source  添加配 ...

  5. springboot-27-整合mybatis,druid连接池

    sprinboot整合mybatis, 有2种方式, 第一种完全使用注解的方式, 还有一种就是使用xml文件的方式 项目使用gradle + idea, 数据源使用druid, 多使用groovy编写 ...

  6. Java的HashCode,Equal和==

    ----------------------------------------以下是分割线---------------------------------------- 我们都知道Java语言是完 ...

  7. cool--music

    1.三年的赌注 2.非酋 3.Swan Song 4.Better Than A Hallelujah

  8. 基于Webkit的浏览器关键渲染路径介绍

    关键渲染路径概念 浏览器是如何将HTML.JS.CSS.image等资源渲染成可视化的页面的呢?本文简单介绍一下渲染过程中涉及到的关键步骤. 该过程分为四步:模型对象的构建.渲染树构建.布局.绘制. ...

  9. [转]magento 2 modes – 每种模式的特点及如何切换(翻译)

    本文转自:https://www.hellomagento2.com/switch-magento-2-system-modes/ 原文地址 在开始 Magento 2 使用之前,需要了解一些基本的东 ...

  10. android studio 断网使用