阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Zebra_Datepicker 中文 API 文档

      插件 jQuery.Zebra_Datepicker 中文 API 文档 https://github.com/stefangabos/Zebra_Datepicker

      一个超轻量级,高度可配置的跨浏览器日期选择器 / 时间选择器 jQuery 插件

      Zebra_Datepicker 是一个小而高度可配置的日期选择器 / 时间选择器 jQuery 插件,旨在通过向它们添加日期 / 时间选择器功能来丰富表单。此 jQuery 插件将自动将日历图标添加到指示的输入字段,单击该字段时,将打开附加的日期选择器。由于日期选择器的直观界面,用户可以轻松地在数月和数年之间跳转。所选日期将使用所选日期格式输入到输入字段中,可在日期选择器选项中进行配置。

      特征

      • 它很小 - 它的重量约为 30KB(压缩 9.1KB),提供每个字节的最佳功能比
      • 它既是日期选择器,也是时间选择器
      • 它是跨浏览器 - 适用于所有主流浏览器;也适用于 Internet Explorer 6!
      • 有一个默认的配色方案,几乎可以与任何设计融为一体,并且可以通过组织良好的 CSS 文件轻松定制;包括两个额外的主题,其中一个用于 Twitter Bootstrap
      • 提供直观的界面,可以轻松导航数月和数年
      • 提供了一种直观的机制,可以使用类似于 cron 语法的语法来禁用日期和日期范围
      • 支持为周六和周日没有周末的国家定义自定义周末日
      • 支持大多数你能想到的日期格式,借用 PHP 日期函数的语法
      • 支持开始和结束日期的各种组合
      • 日期选择器可以“配对” - 其中一个或多个日期选择器将使用另一个日期选择器的值作为开始日期
      • 支持国际化
      • 支持 RTL 语言
      • 通过自动将小日历图标附加到指示的输入字段来工作,该字段在单击时显示附加的日期选择器。
      • 它与 AMD 和 CommonJS 兼容

      如何使用

      首先,从 CDN 加载 jQuery 并提供对本地源的回退,如:

      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script>window.jQuery || document.write('<script src="path/to/jquery-3.3.1.js"><\/script>')</script>
      
      

      加载 Zebra Datepicker jQuery 插件:

      或者,您可以从JSDelivr CDN加载Zebra Datepicker,如下所示:
      
      <!-- for the most recent version, not recommended in production -->
      <script
        src="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js"></script>
      
      <!-- for a specific version -->
      <script
        src="https://cdn.jsdelivr.net/npm/zebra_datepicker@1.9.6/dist/zebra_datepicker.min.js"></script>
      
      <!-- replacing "min" with "src" will serve you the non-compressed version -->
      
      

      从本地源加载样式表文件

      <link rel="stylesheet" href="path/to/theme/zebra_datepicker.min.css">
      
      

      …… 或者来自 JSDelivr CDN

      <!-- for the most recent version of the "default" theme -->
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css">
      
      <!-- for the most recent version of the "bootstrap" theme -->
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/zebra_datepicker.min.css">
      
      <!-- replacing "min" with "src" will serve you the non-compressed version -->
      
      

      Zebra Datepicker 也可用于 cdnjs,这是最着名的免费和公共 Web 前端 CDN 服务之一

      现在,在 DOM-ready 事件中,将 Zebra Datepicker 插件附加到控件

      $(document).ready(function() {
      
          // assuming the controls you want to attach the plugin to
          // have the "datepicker" class set
          $('input.datepicker').Zebra_DatePicker();
      
      });
      

      这将附加日历和指定的元素。单击该图标将使日期选择器可见。

      要获得对附加到元素的 Zebra DatePicker 实例的引用,请执行以下操作:

      var datepicker = $('selector').data('Zebra_DatePicker');
      

      配置选项

      属性

      所有参数都是可选的。

      请注意,下面的任何属性也可以通过数据属性设置。要执行此操作,您必须为要设置的属性的名称添加前缀 data-zdp_。需要记住的一件重要事情是,如果属性的值是一个数组,则必须在方括号内使用双引号,因此在属性周围使用单引号。

      活动

      onChange

      每当用户更改视图(天 / 月 / 年 / 时间)时,以及当用户通过单击 next/previous 任何视图中的图标进行导航时,都会执行回调;

      回调函数接收 2 个参数

      • 当前视图(days,months,years 或 time)
      • 包含视图中活动元素(未禁用)的数组,作为 jQuery 元素,允许在日期选择器视图中轻松自定义和与特定单元格交互

      this 回调函数中的关键字是指日期选择器附加到的元素,作为 jQuery 对象。

      为了简化对特定日期的搜索,每个元素都获得一个 date 数据属性,其格式取决于 view 参数的值,如下所示:

      • YYYY-MM-DD 对于 days 视图中的元素
      • YYYY-MM 对于 months 视图中的元素
      • YYYY 对于 years 视图中的元素

      请注意,还没有为 time 视图中的元素设置此数据属性。

      以下是我们如何突出每年每个月的第 24 天:

      $('selector').Zebra_DatePicker({
      
          //  execute a function whenever the user changes the view
          //  (days/months/years), as well as when the user
          //  navigates by clicking on the "next"/"previous" icons
          //  in any of the views
          onChange: function(view, elements) {
      
              //  on the "days" view...
              if (view === 'days') {
      
                  //  iterate through the active elements in the view
                  elements.each(function() {
      
                      //  to simplify searching for particular dates,
                      //  each element gets a "date" data attribute which
                      //  is the form of:
                      //  - YYYY-MM-DD for elements in the "days" view
                      //  - YYYY-MM for elements in the "months" view
                      //  - YYYY for elements in the "years" view
      
                      //  so, because we're on a "days" view,
                      //  let's find the 24th day using a regular
                      //  expression (notice that this will apply to
                      //  every 24th day of every month of every year)
                      if ($(this).data('date').match(/\-24$/))
      
                          // and highlight it!
                          $(this).css({
                              backgroundColor:    '#C40000',
                              color:              '#FFF'
                          });
      
                  });
      
              }
      
          }
      
      });
      

      onClear

      用户单击“ 清除”按钮时要执行的回调函数。

      回调函数不带参数。this 回调函数中的关键字是指日期选择器附加到的元素,作为 jQuery 对象。

      onClose

      关闭日期选择器时要执行的回调函数。

      回调函数不带参数。this 回调函数中的关键字是指日期选择器附加到的元素,作为 jQuery 对象。

      onOpen

      显示日期选择器时要执行的回调函数。

      回调函数不带参数。this 回调函数中的关键字是指日期选择器附加到的元素,作为 jQuery 对象。

      onSelect

      选择日期时要执行的回调函数。

      回调函数有 3 个参数:

      • 日期采用 format 属性指定的格式
      • YYYY-MM-DD 如果启用了时间选择器,则格式为日期,另外还有小时,分钟和秒
      • 日期作为 JavaScript Date 对象

      this 回调函数内部是指日期选择器附加到的元素,作为 jQuery 对象

      方法

      首先,获得对插件的引用

      var datepicker = $('selector').data('Zebra_DatePicker');
      

      然后调用类似的方法

      datepicker.update();

      clear_date()

      清除所选日期(如果有)

      destroy()

      从元素中删除插件

      set_date(date)

      将日期选择器附加到的元素的值设置为指定的日期;

      日期必须采用 format 属性或 JavaScript Date 对象定义的格式。

      如果禁用日期(disabled_dates 由于 direction 属性或由于属性),将不会设置日期

      Date 从版本开始,方法的参数可以是 JavaScript 对象 1.9.11

      show()

      显示日期选择器(除非 always_visible 属性设置为 true)

      hide()

      隐藏日期选择器(除非 always_visible 属性设置为 true)

      update([ options])

      在运行时更新配置选项,并重新计算日期选择器相对于父元素的图标位置。每当显示 / 隐藏 / 重新定位父元素或更改父元素的尺寸时,都应调用此方法。

      该方法接受可选参数 - 具有要更新的配置选项的对象:

      var datepicker = $('selector').data('Zebra_DatePicker');
      datepicker.update({
          direction: 1
      });
      
      

      如果您只想更新图标的位置,只需调用不带任何参数的方法:

      var datepicker = $('selector').data('Zebra_DatePicker');
      datepicker.update();
      

      全球选择

      如果您有多个共享常用选项的日期选择器,您可以设置这些选项,如下所示:

      // this needs to be called only once and does
      // not have to be called from within a "ready" block!
      $.fn.Zebra_DatePicker.defaults = {
          // any valid options
      }
      

      任何这样设置的选项都将应用于所有新创建的日期选择器。显然,在创建任何新日期选择器时设置的选项将覆盖相应的默认值。

      目录
      目录