• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > js时间查询插件使用详解

js时间查询插件使用详解

作者:霸道小豆丁 字体:[增加 减小] 来源:互联网 时间:2017-05-11

霸道小豆丁通过本文主要向大家介绍了node.js开发实战详解,js prototype详解,js中的this详解,js指标详解附图,js详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

首先要引入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部分:

<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>

</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>
</div>

效果图:

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JS触摸事件、手势事件详解
  • 详解Node.js串行化流程控制
  • 详解node.js平台下Express的session与cookie模块包的配置
  • JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
  • JS排序之冒泡排序详解
  • JS排序之快速排序详解
  • JS排序之选择排序详解
  • 详解node.js搭建代理服务器请求数据
  • 详解Node.js实现301、302重定向服务
  • js时间查询插件使用详解

相关文章

  • 2017-05-11微信小程序 开发之滑块视图容器(swiper)详解及实例代码
  • 2017-05-11JavaScript验证知识整理
  • 2017-05-11JS html时钟制作代码分享
  • 2017-05-11微信小程序模板之分页滑动栏
  • 2017-05-11JavaScript 数据类型详解
  • 2017-05-11BootStrap实现带关闭按钮功能
  • 2017-05-11NodeJs模拟登陆正方教务
  • 2017-05-11Vue.js中用webpack合并打包多个组件并实现按需加载
  • 2017-08-31js JSON介绍
  • 2017-05-11基于Bootstrap 3 JQuery及RegExp的表单验证功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 原生js实现商品放大镜效果
    • jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
    • JS 设计模式--策略模式
    • vue.js指令v-model使用方法
    • Jquery树插件zTree实现菜单树
    • 利用JS实现简单的瀑布流加载图片效果
    • vue.js利用defineProperty实现数据的双向绑定
    • 快速使用node.js进行web开发详解
    • 微信小程序-横向滑动scroll-view隐藏滚动条
    • 详解vuelidate 对于vueJs2.0的验证解决方案

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有