AngularDart Material Design 日期选择器

MaterialDateRangePickerComponent

Selector: <material-date-range-picker> 

材料设计风格的日期范围选择器。

用户可以选择预设日期范围，键入自定义日期范围，或通过播放日历选择范围。

当用户键入日期时，将专门处理具有2位数年份的日期。 例如。7/7/77被解释为1977年7月7日，而不是77年7月7日。这个逻辑看起来是未来20年：现在（2015年8月），“35”被解释为2035，但“36”被解释为“1936”。 明年，“36”将开始被解释为2036年。

由于此选择器的主要用途是针对全局每个应用程序的日期范围，因此该组件还可以读取和写入ObservableReference实例。 （还提供了DatepickerModel类，以便在依赖注入中更容易使用它。）

Attributes:

• popupClass - 要添加到范围选择器弹出窗口的样式类，以便可以以封装方式设置弹出窗口的样式。 有关文档，请参阅MaterialPopup。

Inputs:

• applyButtonLabel String
  “Apply”按钮的标签。仅当您需要“Apply”以外的其他标签时才设置此变量。
  如果设置，输入标签应该国际化。
   
• compact bool 
  是否启用紧凑日历样式。
   
• comparisonOptions List<ComparisonOption> 
  用户可以选择的ComparisonOptions。
  默认情况下，是"Previous period", "Previous year", 和"Custom"。这只能设置一次。Null或空将被忽略。
   
• configuration DateRangePickerConfiguration 
  日期范围选择器配置。
  配置为DateRangePickerConfiguration.predefinedRangesOnly时，将隐藏自定义范围选择器和日历。
  默认为DateRangePickerConfiguration.fullyLoaded。
   
• disabled bool 
  是否应禁用更改所选日期范围。
   
• error String 
  下拉按钮下方显示错误。
   
• maxDate Date 
  无法选择晚于maxDate的日期。
  默认为后十年的12月31日。将其设置为在您的领域上下文中有意义的最新日期。
  例如对于分析历史数据的应用，这可能是当天。
  当用户重新打开弹出窗口时，对maxDate的更改仅应用于选定的“范围”。
   
• minDate Date 
  不能选择早于minDate的日期。
  默认为十年前的1月1日。将此设置为在您的领域上下文中有意义的最早日期。
  例如数据可用于分析的最早日期。当用户重新打开弹出窗口时，对minDate的更改仅应用于选定的“范围”。
   
• movingStartMaintainsLength bool 
  对于日期范围选择，是否单击以移动开始日期也应移动结束日期（保留所选范围的长度）。
  如果通过依赖项注入提供DatepickerConfig对象，则默认为DatepickerConfig.movi​​ngStartMaintainsLength。
   
• placeHolderMsg String 
  如果未选择日期范围，则显示占位符消息。
   
• predefinedRanges List<DatepickerDateRange>
  已禁用！请改用[presets]。
   
• presets List<DatepickerPreset> 
  用户可以选择的预设日期范围列表。
  它们受minDate和maxDate的限制，如果它们的终点在minDate之前或它们的起点在maxDate之后，则完全排除。
   
• range DatepickerComparison 
  选定的日期范围和比较。
  此datepicker使用DatepickerComparison而不是简单的DateRangeComparison对象 - 此内部实现添加了额外需要的功能，如名称和next / prev支持。
   
• relativeDaysToToday bool 
  是否使用LastNDaysToTodayRange来表示“N天到今天”。
   
• requireFullPeriods bool 
  当'requireFullPeriods'为真时，如果上一个或下一个周期不是完整的预定义时间段，则“prev/next”按钮将被禁用，如“week”。
   
• reference ObservableReference<DatepickerComparison> 
  ObservableReference的日期范围。
  如果更方便地就地改变某些内容而不是获取和设置新的日期范围值，则可以使用此方法。
   
• showNextPrevButtons bool 
  是否显示next 和previous按钮。
  默认为true。
   
• supportsClearRange bool 
  此日期范围选择器是否支持清除日期范围。
  默认为false。
   
• supportsComparison bool 
  此日期范围选择器是否支持选择时间比较范围。
  如果配置为DateRangePickerConfiguration.predefinedRangesOnly，则不支持比较。

  默认为true。
   

• supportsDaysInputs bool 
  此日期范围选择器是否包含输入“N天到今天”和“N天到昨天”范围的部分。
  默认为true。

Outputs:

• popupVisible Stream<bool> 
  在datepicker弹出窗口开始打开或关闭时发布。
   
• rangeChange Stream<DatepickerComparison> 
  在所选日期范围或比较范围发生变化时发布。

MaterialDatepickerComponent

Selector: <material-datepicker>

材料设计风格的单日期选择器 - 日期解析输入和日历选择器。 用户可以键入自己的自定义日期，或单击日历以选择日期。

当用户键入日期时，将专门处理具有2位数年份的日期。 例如。7/7/77被解释为1977年7月7日，而不是77年7月7日。这个逻辑看起来是未来20年：现在（2015年8月），“35”被解释为2035，但“36”被解释为“1936”。 明年，“36”将开始被解释为2036年。

如果要选择日期范围，另请参见material-date-range-picker。

Inputs:

• compact bool 
  是否启用紧凑日历样式。
   
• date Date 
  选定的日期。
   
• disabled bool 
  是否应禁用更改所选日期。
   
• error String 
  关闭日期选择器下方显示错误。
  设置此选项时，选取器也会显示红色下划线。
   
• maxDate Date 
  无法选择晚于maxDate的日期。
  默认为后十年的12月31日。将其设置为在您的领域上下文中有意义的最新日期。
  例如对于分析历史数据的应用，这可能是当天。
  当用户重新打开弹出窗口时，对maxDate的更改仅应用于选定的“范围”。
   
• minDate Date 
  不能选择早于minDate的日期。
  默认为十年前的1月1日。将此设置为在您的领域上下文中有意义的最早日期。
  例如数据可用于分析的最早日期。当用户重新打开弹出窗口时，对minDate的更改仅应用于选定的“范围”。
   
• numCalendarWeekRows int 
  设置日历应显示的周数。
   
• outputFormat DateFormat 
  用于格式化日期的格式。
  默认为yMMMd，例如 'Jan 23, 2015'。
   
• popupVisible bool 
  打开或关闭日期选择器。
   
• predefinedDates List<SingleDayRange> 
  用户可以选择的预设日期列表。
  默认值为空，因此显示任何列表。
   
• required bool 
  如果允许空日期，则返回false。
  如果为true，则嵌入的文本字段将向用户显示错误（如果为空）。 如果为false，则清除文本字段会将date设置为null。

Outputs: 

• dateChange Stream<Date> 
  在所选日期更改时发布事件。
   
• focus Stream<FocusEvent> 
  元素聚焦时的事件。
   
• popupVisibleChange Stream<bool> 
  popupVisible更改时发布事件。

 

MaterialCalendarPickerComponent

Selector: <material-calendar-picker>

无限滚动的素材风格日历，支持选择单个日期或日期范围。

您可能希望使用material-datepicker或material-date-range-picker而不是此。

Attributes:

• mode - 此日历支持的交互方式。 有效值为“none”，“single-date”或“date-range”。 默认为“none”。

Styling:

默认情况下，日历选择为蓝色。 可以使用calendar-highlights SCSS mixin自定义选择的颜色。

所选范围具有IDs，用于从mixin中选择正确的样式。 例如，标准日期范围选择器使用此样式：

 @include calendar-highlights('.calendar', (
   range: $mat-blue-map,
   comparison: $mat-google-yellow-map,
   range comparison: $mat-green-map,
 ));

这会将主日期范围（ID为“范围”）设置为蓝色，comparison日期范围设置为黄色，重叠设置为绿色。 必须手动指定重叠颜色; 日历不会尝试自动混合颜色。

Inputs:

• allowHighlightUpdates bool 
  将此设置为false可暂时禁止更新日历的范围突出显示。默认为true。
   
• compact bool 
  是否启用紧凑日历样式。
   
• maxDate Date 
  无法点击或滚动到日期晚于maxDate的日期。
  日历将显示包含此日期的整个月份，但将禁用maxDate（灰色）后的天数。请注意，仍然可以通过编程方式选择禁用日期，例如如果父组件指定扩展超过minDate / maxDate的预设。默认为未来十年的12月31日。将其设置为在您的领域上下文中有意义的最新日期。
  例如对于分析历史数据的应用，这可能是当天。
   

• minDate Date 
  无法单击或滚动到minDate之前的日期。
  日历将显示包含此日期的整个月份，但将禁用minDate前几天（灰色）。请注意，仍然可以通过编程方式选择禁用日期，例如如果父组件指定扩展超过minDate / maxDate的预设。默认为十年前的1月1日。 将此设置为在您的领域上下文中有意义的最早日期。
   例如 数据可用于分析的最早日期。
   

• movingStartMaintainsLength bool 

  对于日期范围选择，是否单击以移动开始日期也应移动结束日期（保留所选范围的长度）。

  默认为true，除非封闭组件具有不同的默认值。
   

• state CalendarState 
  描述日历整个状态的对象 - 在日历上选择的内容，以及选择当前是否“活动”。

Outputs:

• stateChange Stream<CalendarState> 
  在日历状态改变时触发 - 例如 当用户开始拖动所选日期范围时。
   
• visibleMonth Stream<Date> 
  当可见月份发生变化时被触发 - 例如 当一个新月滚动到视图中。

MaterialMonthPickerComponent

Selector: <material-month-picker> 

材料风格的日历，支持选择单个月或月份范围。

Attributes: 

• mode - 此日历支持的交互方式。 有效值为“none”，“single-date”或“date-range”。 默认为“none”。

Inputs:

• maxDate Date 
  无法点击或滚动到日期晚于maxDate的日期。 日历将显示包含此日期的整年，但maxDate后的月份将被禁用（灰色）。
  请注意，仍然可以通过编程方式选择禁用日期，例如如果父组件指定延伸超过minDate / maxDate的预设。

  默认为未来十年的12月。将其设置为在您的领域上下文中有意义的最新日期。例如对于分析历史数据的应用程序，这可能是当前月份。
   

• minDate Date 
  无法单击或滚动到minDate之前的日期。日历将显示包含此日期的整年，但将禁用minDate前的月份（灰色）。
  请注意，仍然可以通过编程方式选择禁用日期，例如 如果父组件指定延伸超过minDate / maxDate的预设。
  默认为十年前的一月。 将此设置为在您的域上下文中有意义的最早日期。 例如 数据可用于分析的最早日期。
   

• state CalendarState 
  描述日历整个状态的对象 - 在日历上选择的内容，以及选择当前是否“active”。

Outputs:

• stateChange Stream<CalendarState> 
  在日历状态改变时触发 - 例如 当用户开始拖动所选日期范围时。

MaterialTimePickerComponent

Selector: <material-time-picker>

材料设计风格的时间输入组件。

Inputs:

• disabled bool 
  是否应禁用更改所选时间。
   
• error String 
  关闭日期选择器下方显示错误。 
  设置此选项时，选取器也会显示红色下划线。
   
• maxTime DateTime 
  用户可以选择的最长日期时间。
   
• minTime DateTime 
  用户可以选择的最短日期时间。
   
• outputFormat DateFormat 
  用于格式化时间的格式。默认为jm，例如'5:08 PM'。
   
• popupVisible bool 
  使下拉列表可见性可访问，以便可以从组件外部打开它。
   
• required bool 
  是否需要时间输入。 
  如果为true，则嵌入的文本字段将向用户显示错误（如果为空）。 如果为false，则清除文本字段会将时间设置为空。
   
• time DateTime 
  选定的时间。日期部分设置为纪元（1970-1-1）。
   
• utc bool 
  窗口小部件是否返回UTC时区的时间。 
  默认情况下，窗口小部件返回本地时区的时间。

Outputs:

• popupVisibleChange Stream<bool> 
  popupVisible更改时发布事件。
   
• timeChange Stream<DateTime> 
  在所选时间更改时发布事件。
  日期设置为纪元（1970-1-1），时间设置为时间

MaterialDateTimePickerComponent

Selector: <material-date-time-picker>

材料设计风格的单日期和时间选择器。

所选日期时间始终位于本地时区。 如果您只想选择日期，请参阅material-datepicker。 如果您只想选择时间，请参阅material-time-picker。
用法示例：

<material-date-time-picker [(dateTime)]="myDateTime">
</material-date-time-picker>

Inputs:

• dateTime DateTime 
  选定的日期时间。
   
• disabled bool 
  是否应禁用更改所选日期和时间。
   
• maxDateTime DateTime
  用户可以选择的最长日期时间。
  默认为往后十年的12月31日23:59。将其设置为在您的领域上下文中有意义的最新日期时间。例如，对于分析历史数据的应用程序，这可以是当前日期时间。
   
• minDateTime DateTime 
  用户可以选择的最短日期时间。 
  默认为十年前的1月1日00:00。将其设置为在您的领域上下文中有意义的最早日期时间。例如，数据可用于分析的最早日期时间。
   
• outputDateFormat DateFormat 
  用于格式化日期的格式。
  默认为yMMMd，例如 'Jan 23, 2015'。
   
• outputTimeFormat DateFormat

  用于格式化时间的格式。

  默认为jm，例如 '5:08 PM'。
   

• required bool 
  是否需要输入日期和时间。如果为true，则嵌入的文本字段将向用户显示错误（如果为空）。 如果为false，则清除文本字段会将dateTime设置为null。

• utc bool 

  小部件是否在UTC时区中返回dateTime。

  默认情况下，小部件返回本地时区的时间。

Outputs:

• dateTimeChange Stream<DateTime>
  选定日期时间更改时发布事件。

DateInputDirective

Selector: <material-input[dateParsing]>

装饰器使装饰输入自动解析本地化日期。

当用户键入日期时，将专门处理具有2位数年份的日期。 例如。 7/7/77被解释为1977年7月7日，而不是7月7日，77。这个逻辑看起来是未来20年：现在（2015年8月），“35”被解释为2035，但“36”被解释为“1936" 年。 明年，“36”将开始被解释为2036年。
装饰输入的值与date属性双向绑定：

• 当该日期更改时，输入将更新以显示它。
• 当输入的文本被更改时（仅在“更改”事件上，而不是在每个按键上），装饰器将尝试将该文本解析为日期。 如果它是有效日期，它将更新所选日期以反映该日期。

这会劫持输入的on-change属性，所以不要在输入上指定，否则这将不起作用。

Inputs:

• date Date 
  选定的日期。
   
• dateFormat DateFormat 
  DateFormat用于格式化日期。 当isMonthInput为false时，默认为yMMMd，例如 “Jul 31, 2015”。 当isMonthInput为true时，默认为yMMM，例如 “Jul 2015”。
   
• month bool 
  如果为true，则控件用于输入月份而不是特定日期。 这会影响日期的解析方式以及如何更改日期以适应所选月份的开头或结尾（取决于rangeEnd）。
   
• maxDate Date 
  最新公认的日期，包括在内。 默认为9999年12月31日 - 即限制为4位数年份。
   
• minDate Date 
  最早的公认日期，包括在内。 默认为1000年1月1日 - 即限制为4位数年份。
   
• rangeEnd bool 

  控制是将输入的日期捕捉到指定月份的开头（false），还是指定月份的末尾（true）。

  仅在isMonthInput为true时使用。

Outputs:

• dateChange Stream<Date> 
  输入有效日期值时触发。

DateRangeInputComponent

Selector: <date-range-input>

日期范围输入是胶合在一起的两个日期输入。

当用户键入日期时，将专门处理具有2位数年份的日期。 例如。 7/7/77被解释为1977年7月7日，而不是7月7日，77。这个逻辑看起来是未来20年：现在（2015年8月），“35”被解释为2035，但“36”被解释为“1936" 年。 明年，“36”将开始被解释为2036年。

Inputs:

• activeDateFormat DateFormat 

  DateFormat用于在输入处于活动状态时格式化日期。

  默认为yMd，例如“7/31/15”。
   

• dateFormat DateFormat 
  DateFormat用于格式化日期。
  默认为yMMMd，例如“Jul 31, 2015”。
   

• disabled bool 
  是否禁用输入字段。 
  如果为true，则组件禁用开始和结束输入字段。
   

• isClearRangeSelected bool 
  仅供内部使用。由material_date_range_editor使用。
   

• maxDate Date 
  最新公认的日期，包括在内。 默认为9999年12月31日 - 即限制为4位数年份。
   

• minDate Date 
  最早的公认日期，包括在内。 默认为1000年1月1日 - 即限制为4位数年份。
   

• range DateRange 
  选定的日期范围。
   

• rangeId String 
  此日期范围输入控件的范围ID。
   

• state CalendarState 
  描述日历整个状态的对象 - 在日历上选择的内容，以及选择当前是否“active”。

Outputs:

• rangeChange Stream<DateRange> 
  所选日期范围更改时触发。 如果两个输入都是有效日期，则文本输入仅触发此操作
   
• stateChange Stream<CalendarState> 
  在日历状态改变时触发 - 例如 当用户开始拖动所选日期范围时。

MaterialDateRangePickerDemoComponent

MaterialDatepickerDemoComponent

MaterialCalendarPickerDemoComponent

MaterialMonthPickerDemoComponent

MaterialTimePickerDemoComponent

MaterialDateTimePickerDemoComponent

DateInputDemoComponent

DateRangeInputDemoComponent

查看示例，查看源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2032479