Angular 2+ 动画的日期和日期范围选择器组件

Angular 2+ 动画的日期和日期范围选择器组件
插件名称 angular-datepicker
发布时间 2020年5月28日
插件作者 koenz

一个动画的,可自定义的日期和日期范围选择器组件,用于Angular 2+应用程序。

一些现有和即将推出的功能

  •  指示
  •  响应式表单支持
  •  多个日历彼此相邻
  •  可组合页脚
  •  可热
  •  使用Intl.DateTimeFormat支持多语言
  •  动画制作
  •  i18n
  •  键盘控制
  •  …

安装:

# Yarn
$ yarn add ngx-animating-datepicker

# NPM
$ npm install ngx-animating-datepicker --save

基本用法 :


通过以下方式之一实现datepicker组件

1.内联Animatepicker
内联实现aa-animatepicker组件

<aa-animatepicker
[options]="datepickerOptions"
[(selectedDates)]="dates"></aa-animatepicker>

2.作为指令
将datepicker实现为指令

<input 
type="text"
value="dates | date"
[options]="datepickerOptions" 
[(selectedDates)]="dates" 
aaDatepicker="directiveOptions" />

选项

这些选项可用于内联以及指令实现。
在以下示例中,您将看到默认选项:

datepickerOptions: Options = {
	selectMultiple: false, // 选择多个日期
	closeOnSelect: false, // 选择日期时关闭日期选择器
	animationSpeed: 400, // 动画速度(毫秒)
	easing: 'ease-in', // 宽松的字符串类型
	hideRestDays: false, // 隐藏休息日
	disableRestDays: true, // 禁用单击“休息日”
	hideNavigation: false, // 隐藏导航
	range: false, // 使用范围功能
	currentDate: new Date(), // 当前显示日期(月、年)
	timeoutBeforeClosing: 5000, // 关闭前的超时/延迟
	weekdayFormat: 'short', // "narrow", "short", "long"
	weekStart: 'monday' // 设置周开始日
};

指令选项
这些选项只能像这样使用在指令上

<input aaDatepicker="directiveOptions" />

在以下示例中,您将看到默认选项

directiveOptions: DirectiveOptions = {
	appendToBody: true, //将日期选择器附加到正文
	openDirection: 'bottom', // 它应该打开的方向
	closeOnBlur: true  // 关闭模糊上的日期选择器
	useAnimatePicker: true // 使用常规日期选择器或动画选择器
};