js时间查询插件使用详解


Posted in Javascript onApril 07, 2017

我从同事那拿来一个时间查询的插件,先记录下来:

首先要引入js文件和css文件,因为我用到了bootstrap  所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说

<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="external nofollow" rel="stylesheet" type="text/css" />
<link href="daterangepicker-bs3.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel="external nofollow" 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>

效果图:

js时间查询插件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
js简单实现网页换肤功能
Apr 07 #Javascript
JS简单实现获取元素的封装操作示例
Apr 07 #Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 #Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 #Javascript
JavaScript函数节流的两种写法
Apr 07 #Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php中JSON的使用方法
2015/04/30 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python打开网页和暂停实例
2014/09/30 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
平面设计的岗位职责
2013/11/08 职场文书
函授本科自我鉴定
2014/02/04 职场文书
项目建议书格式
2014/03/12 职场文书
学期评语大全
2014/04/30 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
卖车协议书范例
2014/09/16 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
质量整改通知单
2015/04/21 职场文书
关于童年的读书笔记
2015/06/26 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript