那是什么?离子中有一个新的DateTime组件吗?betway东盟体育app好吧,不是完全,但是考虑到它经历了巨大的大修,您不会误以为是这样。有了Ionic版本6.0.0版,我们花了很多betway东盟体育app时间根据社区的反馈来更新DateTime组件。我们还更新了组件的设计,以更好地匹配iOS/材料指南。但是,这导致了有关组件以及开发人员如何自定义以适应其需求的大量问题。让我们看一下组件,开始了解其工作原理。

从离子V5betway东盟体育app到V6

在查看新的DateTime组件的样子之前,让我们先查看V5版本。

看到笔
betway东盟体育app离子核V5 DateTime
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

该组件最初是在Ionic控制日期/时间的覆盖和处理显示的想法中构建的,用户只需要单击DateTime即可与之betway东盟体育app交互。

  mmmm yy  <离子 -  datetime displayformat =“ mmmm yy” min =“ 1989-06-06-04” max =“ 2004-08-23“值=” 1994-12-15T13:47:20.789“>  

虽然这在大多数情况下都是有益的,但确实有一些限制。主要限制是您无法将组件直接嵌入到应用中。用户将始终必须通过覆盖与组件进行交互。

此外,该组件的视觉设计开始感觉过时。尽管这种设计在iOS的较旧版本中很受欢迎,但Android和iOS已开始偏离它,并朝着更完整的日历视图转移。最重要的是,它需要JavaScript滚动列,这对下端设备的性能巨大。

考虑到所有这些,需要进行改造。

进入未来

如果要将您的应用程序更新为Ionic V6.0并且不进行任何更改,那betway东盟体育app么您将获得新的DateTime的内容就是这样:

看到笔
betway东盟体育app离子核V6 DateTime:无更改
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

现在,与其隐藏在覆盖层中,不如显示组件。在大多数情况下,一切都“有效”,但远非理想。因此,让我们更新内容并利用一些新属性。

首先,让我们处理布局,这可能是最引人注目的变化。由于现在可以在线显示组件,因此我们不建议人们在离子项目就像之前一样。相反,我们建议使用另一个新组件,离子量,显示和隐藏日期时间。这与iOS的日历应用程序显示内容非常相似。

为此,我们可以像这样修改HTML:

      mmmm yy             

您可以在下面看到此直播:

看到笔
betway东盟体育app离子核V6 DateTime:离子量
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

有一些JavaScript可以处理日期信息,但这不是演示的重点。

V6 DateTime组件中的另一个升级是我们向用户显示的UI类型。在V5示例中,我们所有的显示器显示了一个简单的月份,日期和年度选择器,但是现在使用V6可以选择时间。虽然这很有用,但在这种情况下,我们只需要日历视图。

为了改变这一点,我们可以使用新的介绍DateTime上的属性。这介绍属性使您可以通过传递不同的值来准确自定义用户显示的内容。你可以传递日期,,,,约会时间,,,,,,,,一个月,,,,时间,,,,时间日期, 或者。由于我们只需要日期而不是时间,让我们更改它以使用日期反而。这取代了DisplayFormat属性,其中使用了各种简短的代码,这些代码易于误会。

看到笔
betway东盟体育app离子核V6 DateTime:离子量表呈现
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

内联或覆盖

虽然直列日期很棒,但在某些情况下,在覆盖层中显示组件会带来更好的用户体验。值得庆幸的是,由于新的内联覆盖组件,可以在模式下轻松渲染日期时间。例如,如果我们想修改现有演示以使用内联模式,我们可以使用以下HTML:

看到笔
betway东盟体育app离子Core V6 DateTime:IonAccordion模态
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

    mmmm yy                

现在,当我们单击离子项目,它将触发模式并显示我们的DateTime组件。这是在角度,反应,vue和香草JS中支持的。

现在,如果我们想在弹出窗口中显示DateTime,我们可以简单地将模式交换为离子流行和繁荣!

看到笔
betway东盟体育app离子核V6 DateTime:弹出
迈克·哈丁顿(Mike Hartington)(@mhartington
Codepen.0

  启动时间         

包起来

DateTime是如此强大并且具有很多用例的组件之一,几乎不可能显示所有这些组件。但是希望这篇博客文章至少可以演示一些可能的很酷的事情,尤其是在新组件功能的情况下。因此,请查看DateTime上的新文档,并让我们知道您今天如何使用它!

注册离子通讯,以获取最新新闻和更betway东盟体育app新!

值得注意的答复

  1. 谢谢,非常有用。从5升级后,在Ionic 6上获得相同的行为很麻烦。本指南很有用,应将其添加到官方文betway东盟体育app档IMHO中。

Baidu