阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Datepair.js 中文 API 文档

      插件 jQuery.Datepair.js 中文 API 文档 https://github.com/jonthornton/Datepair.js

      Datepair.js 是一个轻量级的模块化 javascript 插件,可以智能地选择日期和时间范围,灵感来自 Google 日历。它将使开始和结束日期 / 时间保持同步,并可以根据用户操作设置默认值。没有外部依赖,但它可以很容易地与 jQuery 或 Zepto 一起使用。该插件不提供任何 UI 小部件;它预先配置为使用 jquery-timepicker 和 Bootstrap Datepicker,但您可以将它与任何 datepicker 或 timepicker(或根本没有)一起使用。

      寻找 jquery-datepair?向下滚动。

      要求

      jquery-timepicker(> = 1.3)(可以覆盖此依赖项) Bootstrap Datepicker(> = 1.3)(可以覆盖此依赖项)

      用法

      包括 dist/datepair.js 或 dist/jquery.datepair.min.js 在您的应用程序。

      var container = document.getElementById('container')
      var datepair = new Datepair(container, options);
      

      其中#container 包含具有适当类名的时间 / 日期元素。options 是一个可选的 javascript 对象,其参数如下所述。

      请注意,Datepair 由 change 事件触发,除非容器具有某些元素,否则将无法工作。

      选项

      • anchor

        • 将控制其他输入的输入。其中一个"start",“end"或 null。有关更多信息, 请参阅演示页面 默认:“开始”
      • dateClass

        • 日期输入的类名,如果有的话。
        • 默认值:“日期”
      • defaultDateDelta

        • 当用户选择第一个日期时,使用指定的范围填写第二个日期值。价值以天为单位。将此项设置 null 为禁用自动设置第二个日期。
        • 默认值:0
      • defaultTimeDelta

        • 当用户第一次选择时,使用指定的范围填写第二个时间值。值以毫秒为单位;7200000 例如,将此设置为 2 小时范围。将此项设置 null 为禁用第二次自动设置。
        • 默认值:0
      • endClass

        • 范围结束输入的类名。
        • 默认:“结束”
      • parseDate

        • 一个函数,它接受日期输入的 jQuery 元素,并返回 Date 表示日期输入值的本地时间对象。
        • default:Bootstrap Datepicker 的函数
      • parseTime

        • 一个函数,它接受一个时间输入的 jQuery 元素,并返回一个 Date 表示时间输入值的本地时间对象。有关详细信息,请参见示例页面
        • default:jquery-timepicker 的函数
      • setMinTime

        • 一个函数,它接受时间输入的 jQuery 元素和 Date 表示时间的本地时间对象,并设置 timepicker minTime 值。
        • default:jquery-timepicker 的函数
      • startClass

        • 范围起始输入的类名。
        • 默认:“开始”
      • timeClass

        • 时间输入的类名称(如果有)。
        • 默认:“时间”
      • updateDate

        • 一个函数,它接受日期输入的 jQuery 元素和 Date 表示日期的本地时间对象,并设置输入值。
        • default:Bootstrap Datepicker 的函数
      • updateTime

        • 一个函数,它接受时间输入的 jQuery 元素和 Date 表示时间的本地时间对象,并设置输入值。
        • default:jquery-timepicker 的函数

      方法

      • getTimeDiff 获取日期 / 时间范围大小(以毫秒为单位)。
       var milliseconds = datepair.getTimeDiff();
      
      • refresh 如果在首次初始化 datepair 后以编程方式更新日期 / 时间字段,请调用此方法。
       $('#someInput').val(someValue)
       datepair.refresh();
      
      • remove 从一组输入中取消绑定日期对功能。
       datepair.remove();
      

      活动

      • rangeError 在用户与日期对输入交互但选择无效范围后触发,其中结束时间 / 日期在开始之前。

      • rangeIncomplete 用户与日期对输入交互但仍保留一个或多个空输入后触发。未配对的输入(例如没有相应结束日期的开始日期)将不予考虑。

      • rangeSelected 在用户与日期对输入交互并且所有配对输入都具有有效值后触发。

      jQuery 插件

      Datepair.js 包含一个可选的 jQuery 接口,可以简化使用 jQuery 或 Zepto 时的使用。激活,包括 datepair.js 和 jquery.datepair.js,或只是 jquery.datepair.min.js。(缩小版包含两个脚本。)

      用法

      $('#container').datepair(options);
      var milliseconds = $('#container').datepair('getTimeDiff');
      $('#container').datepair('remove');
      $('#container').datepair('refresh');
      

      jQuery-UI Datepicker

      默认情况下,Datepair.js 配置为使用 Bootstrap Datepicker。这与 jQuery UI Datepicker 不同。要使用 jQuery UI Datepicker,请覆盖 parseDate 和 updateDate 方法:

      $('#some-container').datepair({
          parseDate: function (el) {
              var val = $(el).datepicker('getDate');
              if (!val) {
                  return null;
              }
              var utc = new Date(val);
              return utc && new Date(utc.getTime() + (utc.getTimezoneOffset() * 60000));
          },
          updateDate: function (el, v) {
              $(el).datepicker('setDate', new Date(v.getTime() - (v.getTimezoneOffset() * 60000)));
          }
      });
      
      目录
      目录