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 相关文章推荐
给ListBox添加双击事件示例代码
Dec 02 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Vue底层实现原理总结
Feb 17 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
怎么快速自学python
2020/06/22 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年生产部工作总结
2014/12/17 职场文书
介绍长城的导游词
2015/01/30 职场文书
狂人日记读书笔记
2015/06/30 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python