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

查看示例，查看源码。