专栏首页Google DartAngularDart Material Design 日期选择器 顶

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>  在所选日期范围或比较范围发生变化时发布。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为Flutter应用程序添加交互性 顶

    你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

    南郭先生
  • Flutter Widget框架之旅 顶

    Flutter小部件采用现代反应式框架构建,从React中获得灵感。 中心思想是你从小部件中构建你的UI。 小组件描述了他们的视图在给定其当前配置和状态时应该看...

    南郭先生
  • Flutter中构建布局 顶

    然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。

    南郭先生
  • 有了这个日期工具类,让日期转化不再烦恼

    想必程序员在开发过程中,遇到日期转化肯定避免不了的。它让人爱恨不已,而有些又记不住,每次遇到都得问度娘。我最近在开发过程中亦是如此。

    格姗知识圈
  • 华为面试题:写一个程序要求出用1,2,5这三个数不同个数组合的和为100的组合个数(Java实现)

    因此,组合总数为100以内的偶数+95以内的奇数+90以内的偶数+…+5以内的奇数+1,

    葆宁
  • 如何在PP中通过添加列计算移动平均?

    逍遥之
  • php时间函数 time()和Date()详解

    使用函式 date() 实现  <?php echo $showtime=date("Y-m-d H:i:s");?>  显示的格式: 年-月-日 小时:分...

    V站CEO-西顾
  • 如何在Power Pivot中通过添加列计算不连续日期移动平均?

    之前我们讲了连续日期的移动平均的求法,那我们这次来看下如果不连续日期如何计算移动平均。

    逍遥之
  • Flutter版本玩Android客户端(7)——状态管理

    在上一篇文章Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消中完成了登录模块,但遗留的问题是未进行状态同步,导致left dra...

    用户1108631
  • 东哥陪你学PowerBI——日期表

    常在群里看到很多关于对日期表的疑问和困惑,尤其是刚进群的初学者。那今天我们就来聊一下,日期表是怎么回事,在业务分析里究竟起了什么作用?

    公众号PowerBI大师

扫码关注云+社区

领取腾讯云代金券