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 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

2032
来自专栏移动开发之家

Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

9163
来自专栏DeveWork

解决七牛云存储缓存加速Gravatar 头像图片路径url 参数失效的问题

前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 ...

2137
来自专栏dotnet & java

datatables 配套bootstrap3样式使用小结(1)

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。

932
来自专栏数据小魔方

左手用R右手Python系列之——表格数据抓取之道

在抓取数据时,很大一部分需求是抓取网页上的关系型表格。 对于表格而言,R语言和Python中都封装了表格抓取的快捷函数,R语言中XML包中的readHTMLTa...

4866
来自专栏五毛程序员

五毛的cocos2d-x学习笔记06-处理用户交互

1462
来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1575
来自专栏疯狂的小程序

实例分享微信小程序项目搭建(下)

首次 执行 wx.getLocation 小程序将自动调启如下 dialog:

2805
来自专栏数值分析与有限元编程

打造高颜值的Python IDLE

与其他IDE相比,Python自带的IDLE给人的感觉就是一个字--土,就像一个不会打扮的女人。其实我们可以让他高大上一些,这样敲出的代码就赏心悦目,比如像下面...

4225
来自专栏Play & Scala 技术分享

通俗的理解阻塞/非阻塞和同步/异步的概念

3536

扫码关注云+社区

领取腾讯云代金券