快速日期选择器 ngQuickDate

快速日期选择器 ngQuickDate

项目地址:https://gitcode.com/adamalbrecht/ngQuickDate

ngQuickDate 是一个基于 Angular.js 的日期时间选择指令，强调快速数据输入和简洁设计，同时具备高度可配置性和易于重新样式化的特点。

下载与安装

你可以从版本 1.3.4 开始下载：

版本 1.3.4

仅兼容 Angular 1.2.x。如果你需要兼容 Angular 1.0.x，请查看 angular-1.0 分支。

还可以通过 Bower 安装：

bower install ngQuickDate

或者在你的 bower.json 文件中添加：

dependencies: {
  "ngQuickDate": "~1.3.0"
}

注意事项： ngQuickDate 除 Angular 外无其他依赖，但借助第三方库可以增强其日期解析功能。详情见智能日期时间解析部分。为了优化样式，建议使用如 Font Awesome 这样的图标库。请参阅样式和配置选项部分。

在线演示

你可以在这里找到一些基本的示例：ngQuickDate 示例

基本使用

将 JS 文件，主 CSS 文件和（可选，但推荐）主题 CSS 文件引入到您的项目中。然后在你的应用模块中包含这个模块：

app = angular.module("myApp", ["ngQuickDate"])

指令本身简单地称为 datepicker。唯一必需的属性是 ngModel，它应该是一个日期对象。

<quick-datepicker ng-model='myDate'></quick-datepicker>

• 注：在版本 1.3 之前应为 <datepicker>*

内联选项

有许多可以通过属性直接配置的选项。以下是其中几个：

| 选项 | 默认值 | 描述 | |--------------------|-------------------|---------------------------------------------------------------------------------------| | date-format | "M/d/yyyy" | 日期格式用于日期输入框。 | | time-format | "h:mm a" | 时间格式用于时间输入框。 | | label-format | null | 按钮上的日期/时间格式。若为空，将使用组合日期和时间格式。 | | placeholder | '点击设置日期' | 当模型变量为 null 时按钮显示的文本。 | | required | false | 使字段成为必填项。将会设置 $invalid 属性于控制和表单上，否则 | | hover-text | null | 按钮的悬停文本。 | | icon-class | null | 如果设置了，<i class='some-class'></i> 将会插入到按钮内。 | | disable-timepicker | false | 若为真，则时间选择器将被禁用，标签默认格式只显示日期。 | | disable-clear-button | false | 若为真，清除按钮会被移除 | | on-change | null | 设置为一个函数，在日期改变时调用该函数 | | default-time | null | 点击日历中的日期后要设置的时间，必须是 24 小时格式。 | | init-value | null | 作为字符串设置初始值。将会立即解析并设为模型的值。 | | date-filter | null | 设置为一个函数，启用或禁用日期。用于禁用周末等。更多信息请参阅下文 |

示例：

<quick-datepicker ng-model='myDate' date-format='EEEE, MMMM d, yyyy' placeholder='选择日期' disable-timepicker='true'></quick-datepicker>

配置选项

如果你想为任何内联选项设置不同的默认值，可以在应用的配置阶段进行配置。还有一些选项只能这样设置。

app.config(function(ngQuickDateDefaultsProvider) {
  ngQuickDateDefaultsProvider.set('option', 'value');
  // 或者使用哈希
  ngQuickDateDefaultsProvider.set({option: 'value', option2: 'value2'});
})

| 选项 | 默认值 | 描述 | |-------------------|----------------|----------------------------------------------------------------------------------------------| | 所有内联选项 | 见上表 | 注意它们必须以驼峰式命名。 | | buttonIconHtml | null | 如果想要设置默认按钮图标，将其设置成类似 <i class='icon-calendar'></i> 的 HTML 代码。 | | closeButtonHtml | 'X' | 默认情况下，关闭按钮只是一个 'X' 字符。你可以将其设置为图标或图片。 | | nextLinkHtml | 'Next' | 默认情况下，下一个月份链接只是文本。你可以设置为图标或图像。 | | prevLinkHtml | 'Prev' | 默认情况下，上一个月份链接只是文本。你可以设置为图标或图像。 | | dayAbbreviations | （见下文） | 用于日历顶部行的天缩写。 | | parseDateFunction | （见下文） | 用于将字符串转换为日期对象的函数。 |

默认天缩写： ["Su", "M", "Tu", "W", "Th", "F", "Sa"]

默认解析日期函数：

function(str) {
  var seconds = Date.parse(str);
  return isNaN(seconds) ? null : new Date(seconds);
}

聪明的日期/时间解析

默认情况下，日期和时间输入框中输入的内容会使用 JavaScript 的内置 Date.parse() 函数来解析。但是这个函数不支持许多格式，并且跨平台的一致性不佳。我推荐使用 Sugar.js 或 Date.js 库代替。

如果你想使用 Sugar，可以像这样配置：

app.config(function(ngQuickDateDefaultsProvider) {
  ngQuickDateDefaultsProvider.set('parseDateFunction', function(str) {
    d = Date.create(str);
    return d.isValid() ? d : null;
  });
})

对于 Date.js：

parseDateFunction: function(str) {
  return Date.parse(str);
}

当然，你可以覆盖这个解析函数，所以你可以切换其他库或自定义解析器。

日期格式化

请注意，当以规范形式显示日期时，Angular 的 日期过滤器 会被用来处理。因此，如果您想自定义格式，请参考此链接查看格式化语法。Sugar.js 和 Date.js 有自己的格式化语法，与 Angular 的不同。

日期筛选函数

如果想阻止用户选择某些日期，例如周末或已经“预定”的日期，你可以通过 date-filter 属性来实现。例如，如果要禁用周末，可以这样做：

<quick-datepicker ng-model='myDate' date-filter='onlyWeekdays'></quick-datepicker>

$scope.onlyWeekdays = function(d) {
  dayIndex = d.getDay();
  return ((dayIndex != 0) && (dayIndex != 6));
}

你也可以在 配置选项 中设置默认日期筛选函数。

样式

有一个非常轻量级的样式集使得日期选择器可以正常工作，但它并不特别美观。你可以使用默认主题，或者很容易地编写自己的主题。

使用字体图标库，比如 Font Awesome，可以大大提高其外观。要使其看起来像截图所示，你需要 Font Awesome 4.0 并进行以下配置：

app.config(function(ngQuickDateDefaultsProvider) {
  // 使用来自 font-awesome 的图标
  return ngQuickDateDefaultsProvider.set({
    closeButtonHtml: "<i class='fa fa-times'></i>",
    buttonIconHtml: "<i class='fa fa-calendar'></i>",
    nextLinkHtml: "<i class='fa fa-chevron-right'></i>",
    prevLinkHtml: "<i class='fa fa-chevron-left'></i>"
  });
});

浏览器支持

目前，已在 Chrome 上进行了测试。

贡献

欢迎贡献。尽可能地，请在您的贡献中包含测试覆盖率。

1. 叉它
2. 创建你的特性分支 (git checkout -b my-new-feature)
3. 提交你的改动 (git commit -am 'Add some feature')
4. 推送到分支 (git push origin my-new-feature)
5. 创建新的 Pull 请求

要运行项目，你需要 NPM 和 Bower。运行 npm install 和 bower install 来安装所有依赖。然后在项目目录中运行 grunt 监控并编译更改。你可以运行 karma start 来监控文件变动并自动执行单元测试。

未来可能的功能

• 优化移动设备（现在已能正常使用，但仍有一些改进空间）

探索 ngQuickDate，让您的日期选择体验更上一层楼！

项目地址:https://gitcode.com/adamalbrecht/ngQuickDate