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 相关文章推荐
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
JS删除对象中某一属性案例详解
Sep 08 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经典面试题集锦
2015/03/19 PHP
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python struct模块解析
2014/06/12 Python
python随机生成指定长度密码的方法
2015/04/04 Python
详细解读Python中的__init__()方法
2015/05/02 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python hook监听事件详解
2018/10/25 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python中如何添加自定义模块
2020/06/09 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
班长岗位职责
2013/11/10 职场文书
市场部管理制度
2014/02/02 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers