angular 日期选择器_使用Angular，Bulma和Moment.JS构建日期时间范围选择器

angular 日期选择器

Picking a date. Should be simple enough right? After multiple iterations of using the default HTML5 date-picker and various npm packages, the truth dawned upon me. Not quite. Although they work for their designated use cases, ultimately there isn’t one out there that fulfills them all. So, I rolled up my sleeves to build one from scratch. (with some help) Here’s how I did it.

选择日期。 应该足够简单吧？ 在使用默认HTML5日期选择器和各种npm包进行了多次迭代之后，真相大白。 不完全的。 尽管他们为指定的用例工作，但最终没有一个能满足他们的全部需求。 因此，我卷起袖子从头开始打造袖子。 (在一些帮助下 )这是我的操作方式。

Date Time Range Picker

日期时间范围选择器

Let me retrace my steps to explain how I built this brick by brick, date by date, month by month, year by… Okay you get the point. Lets go right to the beginning and get a peek of my process.

让我回顾我的步骤，以解释我是如何逐块，按日期，按月，按年建造此积木的。 让我们从头开始，一窥我的过程。

1.列出要求 (1. List out the Requirements)

We need an intuitive date picker that is capable of checking the following boxes:

我们需要一个直观的日期选择器，它可以选中以下框：

• Allow picking a date
  允许选择日期
• Provide option to include end date so as to allow picking start date as well as end date
  提供包括结束日期的选项，以便允许选择开始日期和结束日期
• Provide option to include time
  提供选项以包括时间
• Allow entering time in various formats (Essentially, we need a smart time picker)
  允许输入各种格式的时间(基本上，我们需要一个智能的时间选择器)

Now that we’ve got the todos listed down. Lets roughly visualize how this component should ideally look like. Here’s an early illustration:

现在，我们列出了待办事项。 让我们大致可视化该组件的理想外观。 这是一个早期的例子：

Rough Illustration