摘取日期者

一个简单的 jQuery 取日期插件 .

• 网站

目录

• 特征
• 主要
• 开始
• 选项
• 方法
• 活动
• I18n 时
• 无冲突
• 浏览器支持
• 版本
• 许可证

特征

• 支助 选项
• 支助 方法
• 支助 事件
• 支持内入模式
• 支持触摸( 移动)
• 支持国际化
• 交叉浏览器支持

主要

dist/
├── datepicker.css
├── datepicker.min.css   (compressed)
├── datepicker.js        (UMD)
├── datepicker.min.js    (UMD, compressed)
├── datepicker.common.js (CommonJS, default)
└── datepicker.esm.js    (ES Module)

开始

安装

npm install @chenfengyuan/datepicker

包含文件 :

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/datepicker.css" rel="stylesheet">
<script src="/path/to/datepicker.js"></script>

使用量

初始化为 $.fn.datepicker 方法.

<input data-toggle="datepicker">
<textarea data-toggle="datepicker"></textarea>
<div data-toggle="datepicker"></div>

$('[data-toggle="datepicker"]').datepicker();

回到顶部

选项

您可以设置选取日期选项 $().datepicker(options)。 。 。 . 如果您想要更改全局默认选项, 您可以使用 $.fn.datepicker.setDefaults(options)。 。 。 .

自动显示

• 类型 : Boolean
• 默认 : false

初始化时自动显示取枣者 .

自动隐藏

• 类型 : Boolean
• 默认 : false

选取时自动隐藏取枣者 .

自动选择

• 类型 : Boolean
• 默认 : false

初始化时自动选择初始日期 .

内入

• 类型 : Boolean
• 默认 : false

启用内线模式 .

如果元素不是输入元素,则会将取日期符附加到元素中. 如果 container 选项,将把取日期器附加到容器中.

集装箱

• 类型 : Element 或者说 String(选择)
• 默认 : null

放置取枣器的元素 。 如果不设定,取出日期将附加在 document.body 默认.

只有当 inline 选项设置为 true。 。 。 .

触发

• 类型 : Element 或者说 String(选择)
• 默认 : null

触发取枣者的元素 .

语言

• 类型 : String
• 默认 : ''

ISO语言代码. 如果没有设置, 将使用内置语言( N)en-US默认情况下.

您应该先定义语言 。 查看 I18n 时 或检查 i18n 可用语言的文件夹.

$().datepicker({
  language: 'en-GB'
});

格式

• 类型 : String
• 默认 : 'mm/dd/yyyy'
• 可用的日期占位符 :
  • 年份 : yyyy, (中文(简体) ), yy
  • 月数 : mm, (中文(简体) ), m
  • 天数 : dd, (中文(简体) ), d

日期字符串格式.

$().datepicker({
  format: 'yyyy-mm-dd'
});

日期

• 类型 : Date 或者说 String
• 默认 : null

初约. 如果不设定, 默认将使用当前日期 .

$().datepicker({
  date: new Date(2014, 1, 14) // Or '02/14/2014'
});

开始日期

• 类型 : Date 或者说 String
• 默认 : null

开始取景日期. 此日期之前的所有日期将被禁用 .

结束日期

• 类型 : Date 或者说 String
• 默认 : null

终收视日期. 此日期后的所有日期都将被禁用 .

开始查看

• 类型 : Number
• 默认 : 0
• 选项 :
  • 0天数 :
  • 1月数
  • 2年数 :

初始化时的起始视图 .

每周开始

• 类型 : Number
• 默认 : 0
• 选项 :
  • 0时间:周日
  • 1时间:星期一
  • 2页:1
  • 3(单位:千美元)
  • 4页:1
  • 5页:1
  • 6页:1

周之起发.

第一年

• 类型 : Boolean
• 默认 : false

在摘取日期的页眉上显示月前的一年

后继年份

• 类型 : String
• 默认 : ''

弦后缀为年号.

$().datepicker({
  yearSuffix: '年'
});

天数

• 类型 : Array
• 默认 : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

日以周为名.

短时间

• 类型 : Array
• 默认 : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

更短日取名.

天数min

• 类型 : Array
• 默认 : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

最短日名相会.

月数

• 类型 : Array
• 默认 : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

数月取名.

短短数月

• 类型 : Array
• 默认 : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

更短数月名.

项目标签

• 类型 : String
• 默认 : 'li'

年、月和日的每个项目的元素标记.

哑巴分类

• 类型 : String
• 默认 : 'muted'

哑弹项目的一个类( CSS) .

选中等级

• 类型 : String
• 默认 : 'picked'

选取项的类( CSS) .

禁用分类

• 类型 : String
• 默认 : 'disabled'

禁用项目的一个类( CSS) .

突出显示 类

• 类型 : String
• 默认 : 'highlighted'

用于突出日期项的类( CSS) .

模板

• 类型 : String
• 默认 :

<div class="datepicker-container">
  <div class="datepicker-panel" data-view="years picker">
    <ul>
      <li data-view="years prev">&lsaquo;</li>
      <li data-view="years current"></li>
      <li data-view="years next">&rsaquo;</li>
    </ul>
    <ul data-view="years"></ul>
  </div>
  <div class="datepicker-panel" data-view="months picker">
    <ul>
      <li data-view="year prev">&lsaquo;</li>
      <li data-view="year current"></li>
      <li data-view="year next">&rsaquo;</li>
    </ul>
    <ul data-view="months"></ul>
  </div>
  <div class="datepicker-panel" data-view="days picker">
    <ul>
      <li data-view="month prev">&lsaquo;</li>
      <li data-view="month current"></li>
      <li data-view="month next">&rsaquo;</li>
    </ul>
    <ul data-view="week"></ul>
    <ul data-view="days"></ul>
  </div>
</div>

取枣者之模板.

说明: 所有的东西 data-view 属性在自定义时必须设置.

页:1

• 类型 : Number
• 默认 : 10

从元素中取出日期的上下相抵.

zindex 数据

• 类型 : Number
• 默认 : 1

支助科 z-index 选择日期的样式.

过滤器

• 类型 : Function
• 默认 : null
• 语法 filter(date, view)
  • date:检查日期.
  • view: 当前视图, 其中之一 day, (中文(简体) ), month 或者说 year。 。 。 .

过滤每个日期项目 。 如果返回 a false 值,相关日期将被禁用.

var now = Date.now();

$().datepicker({
  filter: function(date, view) {
    if (date.getDay() === 0 && view === 'day') {
      return false; // Disable all Sundays, but still leave months/years, whose first day is a Sunday, enabled.
    }
  }
});

显示

• 类型 : Function
• 默认 : null

"show.date pickers"事件的捷径.

隐藏

• 类型 : Function
• 默认 : null

"hide.datepicker"事件的捷径.

选择

• 类型 : Function
• 默认 : null

"取出日期"事件的捷径.

回到顶部

方法

常见用法 :

$().datepicker('method', argument1, , argument2, ..., argumentN);

显示 ()

显示取枣者.

隐藏( c)

藏取枣者.

更新()

用当前元素的值或文本更新取日期符.

选择( c)

选择当前日期为元素 .

重设( c)

重置取枣者.

获取月Name ([月 [, 短 ])

• 月份 (可选) :

  • 类型 : Number
  • 默认: 当前日期的月份

• 简称 (可选) :

  • 类型 : Boolean
  • 默认 : false
  • 获取较短的月份名

• (返回值):

  • 类型 : String

以给定参数或当前日期获取月份名称 .

$().datepicker('getMonthName'); // 'January'
$().datepicker('getMonthName', true); // 'Jan'
$().datepicker('getMonthName', 11); // 'December'
$().datepicker('getMonthName', 11, true); // 'Dec'

获取 Day Name ([日 [, 短 [, 分)])

• 日数 (可选) :

  • 类型 : Number
  • 默认: 当前日期的日期

• 简称 (可选) :

  • 类型 : Boolean
  • 默认 : false
  • 获取更短的日名

• 分钟 (可选) :

  • 类型 : Boolean
  • 默认 : false
  • 获取最短的日名

• (返回值):

  • 类型 : String

获取指定参数的日名或当前日期 .

$().datepicker('getDayName'); // 'Sunday'
$().datepicker('getDayName', true); // 'Sun'
$().datepicker('getDayName', true, true); // 'Su'
$().datepicker('getDayName', 6); // 'Saturday'
$().datepicker('getDayName', 6, true); // 'Sat'
$().datepicker('getDayName', 6, true, true); // 'Sa'

获取日期( [格式化 )

• 格式化 (可选) :

  • 类型 : Boolean
  • 默认 : false
  • 获得格式化的日期字符串

• (返回值):

  • 类型 : Date 或者说 String

获取当前日期 .

$().datepicker('getDate'); // date object
$().datepicker('getDate', true); // '02/14/2014'

日期( 日期)

• 日期数字 :
  • 类型 : Date 或者说 String

以新日期设定当前日期 .

$().datepicker('setDate', new Date(2014, 1, 14));
$().datepicker('setDate', '02/14/2014');

设定开始日期( 日期)

• 日期数字 :
  • 类型 : Date 或者说 String 或者说 null

以新日期设定起始视图日期 .

设定结束日期( 日期)

• 日期数字 :
  • 类型 : Date 或者说 String 或者说 null

以新日期设定结束视图日期 .

参数( 日期)

• 日期数字 :
  • 类型 : String

用设定的日期格式分析日期字符串.

$().datepicker('parseDate', '02/14/2014'); // date object

格式 Date( 日期)

• 日期数字 :
  • 类型 : Date

将日期对象格式化为带有设定日期格式的字符串.

$().datepicker('formatDate', new Date(2014, 1, 14)); // '02/14/2014'

销毁()

摧毁取枣者并删除目标元素中的实例.

回到顶部

活动

显示. 日期选择器

此事件在开始显示取枣者时会起火.

隐藏. 日期选择器

这个事件在开始隐藏取枣者时会起火.

pick.date picker (英语)

• 事件. 日期数字 :

  • 类型 : Date
  • 目前的日期

• 事件。视图数字 :

  • 类型 : String
  • 默认 : ''
  • 选项 : 'year', (中文(简体) ), 'month', (中文(简体) ), 'day'
  • 当前可见的视图

一年、一月或一日.

$().on('pick.datepicker', function (e) {
  if (e.date < new Date()) {
    e.preventDefault(); // Prevent to pick the date
  }
});

回到顶部

I18n 时

// datepicker.zh-CN.js
$.fn.datepicker.languages['zh-CN'] = {
  format: 'yyyy年mm月dd日',
  days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
  daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  daysMin: ['日', '一', '二', '三', '四', '五', '六'],
  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  weekStart: 1,
  startView: 0,
  yearFirst: true,
  yearSuffix: '年'
};

<script src="/path/to/datepicker.js"></script>
<script src="/path/to/datepicker.zh-CN.js"></script>
<script>
  $().datepicker({
    language: 'zh-CN'
  });
</script>

回到顶部

无冲突

如果您需要使用同一命名空间的其他插件, 请打电话到 $.fn.datepicker.noConflict 重新使用的方法.

<script src="other-plugin.js"></script>
<script src="datepicker.js"></script>
<script>
  $.fn.datepicker.noConflict();
  // Code that uses other plugin's "$().datepicker" can follow here.
</script>

浏览器支持

• 颜色( 最新)
• 火狐( 最新)
• 萨法里(最新)
• 歌剧( 最新)
• 边缘( 最新)
• 互联网探索者 9+

版本

维持在 语义版准则。 。 。 .

许可证

麻省理工学院 © 陈凤远

回到顶部