js时间查询插件使用详解

2024-10-20 00:49:16

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

首先要引入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时间选择器兼容IE6,7,8,9

在线演示: http://demo.jb51.net/js/2012/js_date/ 复制代码代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascri
javascript英文日期（有时间）选择器

var languageCode = 'en'; // Possible values: en,ge,no,nl,es,pt-br,fr // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8
extjs 时间范围选择自动判断的实现代码

extjs中有时需要选择一个日期范围,需要自动判断,选择的开始日期不能大于结束日期,或结束日期不能小于开始日期,实现的代码如下效果图: 从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现两个日期选择器的联动. 代码如下: 首先定义联动处理函数: Ext.apply(Ext.form.field.VTypes, { daterange: function (val, field) { var date = field.parseDate(val); if (!date)
laydate.js日期时间选择插件

日期时间选择插件laydate.js: 效果图: 1. 引入JS. 官网:http://laydate.layui.com <script type="text/javascript" src="js/laydate.js"></script> 2. 根据需要做相应的配置.详情参看官网. <script> laydate({ elem: '#seldate', //目标元素.由于laydate.js封装了一个轻量级的选择器引擎,因
JS日期和时间选择控件升级版(自写)

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹
JS实现漂亮的时间选择框效果

本文实例讲述了JS实现漂亮的时间选择框效果.分享给大家供大家参考,具体如下: HTML代码部分: <html> <script language=javascript src="dataone.js"></script> <table align="center"> <tr> <td> <body> (1)只选择日期 <input type="text" n
vue.js实现仿原生ios时间选择组件实例代码

前言最近几个月一直在看VUE,然后试着只用原生js+vue实现某些组件. PC端时间选择组件这是最开始实现的pc上的时间选择,平时移动端也在做,所以就想实现一下移动端的时间选择器,下面分享一下我实现移动端滚轮特效时间选择器的思路和过程.整个组件是基于vue-cli来进行构建的功能 1.时间选择[ A.年月日选择 B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择] 2.滚轮效果[ A.构成一个圆环首尾相连 B.不构成首尾相连] 3.时间选择范围设置(所选时间超过范围将弹窗提示),分钟间
js判断选择时间不能小于当前时间的示例代码

复制代码代码如下: var controldate; function checkDate(){ controldate= document.getElementById("sendDate").value; if(controldate==""){ alert('日期不能为空'); return false; }else{ var day = new Date(); var Year = 0; var Month = 0; var Day = 0; var Cu
js判断选择的时间是否大于今天的代码

复制代码代码如下: <script>$("#pseudo_review_time'+goods_id+'").datepicker({dateFormat: "yy-mm-dd"});$("#pseudo_review_time'+goods_id+'").change(function(){var thetime=$(this).val();var d=new Date(Date.parse(thetime.replace(/-/
js时间查询插件使用详解

我从同事那拿来一个时间查询的插件,先记录下来: 首先要引入js文件和css文件,因为我用到了bootstrap 所以引入的文件有点多:ps: 如果有需要的小伙伴,可以直接跟我说 <script src="jquery-1.11.2.min.js"></script> <script src="bootstrap.min.js"></script> <script src="moment.js"
jQuery时间轴插件使用详解

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: <!-- //设置内容; window.onWebMessage( '{"type":&qu
Vue.js图片预览插件使用详解

Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue
BootStrap中Table分页插件使用详解

分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式引入css和js  <link href=&qu
基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据下面分页使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
postman自定义函数实现时间函数的思路详解

Postman说明 Postman是一种网页调试与发送网页http请求的chrome插件.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. Postman背景介绍用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以调试简单的css.html.脚本等简单的网页基本信息,它还可以发送几乎所有类型的HTTP请求!Postman在发
js 实现验证码输入框示例详解

目录前言思路遇到的问题 HTML CSS JS 前言验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位
mybatis分页插件pageHelper详解及简单实例

mybatis分页插件pageHelper详解及简单实例工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下  <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5
vue.js+boostrap项目实践(案例详解)

一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
第十篇BootStrap轮播插件使用详解

Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c

js时间查询插件使用详解

相关推荐

随机推荐