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

查看示例，查看源碼。