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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
聊聊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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
js日历功能对象
2012/01/12 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python定时器使用示例分享
2014/02/16 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python实现爬取图书封面
2018/07/05 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
护理实习自我鉴定
2013/12/14 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
Python基础详解之描述符
2021/04/28 Python
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python