插件 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)));
    }
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了