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包进行了多次迭代之后，真相大白。 不完全的。 尽管他们为指定的用例工作，但最终没有一个能满足他们的全部需求。 因此，我卷起袖子从头开始打造袖子。 (在一些帮助下 )这是我的操作方式。

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:

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

… Thank god for css.

……感谢上帝的支持。

Okay, going by our exquisite illustration. What we will need to put in place first, is a basic calendar that is navigable by months showing the year and days of the week.

好吧，按照我们的精美插图。 我们首先需要设置的是基本日历，可以通过显示年份和星期几的月份导航。

2.结构化数据： (2. Structuring The Data:)

We need to design our data structure that will allow us to map days of each month. This grid like structure can be implemented in the following manner:

我们需要设计数据结构，以便我们可以绘制每个月的日期。 这种网格状结构可以通过以下方式实现：

“Here obj is an entity that represents the day which we will later use to store custom key values that will indicate if the day is available, is selected and so on”

“这里的obj是一个代表日期的实体，我们以后将使用它存储自定义键值，该值将指示该日期是否可用，是否已选择等”

gridArr = {        "Jan": [obj, obj,...], // 31 objects        "Feb": [obj, obj, ...], // 28/29 objects          ...        "Dec": [obj, obj, ...], // 31 objects} 

Only, that was the mistake I initially made. In trying to bring the mockups to life, it did not cross my head what would happen if we navigate across years.

只是，那是我最初犯的错误。 试图使样机栩栩如生，这并没有让我费解，如果我们跨年航行，会发生什么。

So, we need another layer of restructuring.

因此，我们需要进行另一层重组。

gridArr = {        "2020": {                  "Jan": [obj, obj,...], // 31 objects                  "Feb": [obj, obj, ...], // 28/29 objects                    ...                  "Dec": [obj, obj,...], // 31 objects                },        "2021": {                  ...                 }}

3.填补空白 (3. Filling in the Gaps)

In every calendar month, there are certain number of days that are grayed out or blank. Basically, only the days belonging to the current month matter to us. Using Moment.js, we can get the start/end day of the month and its corresponding day number of the week. So all the cells that appear before our starting day number and those that appear after our last day number, are empty or blank.

在每个日历月中，都有一定天数变灰或空白。 基本上，只有属于当月天对我们非常重要。 使用Moment.js，我们可以获得当月的开始/结束日期及其对应的星期几。 因此，出现在我们开始日期编号之前和之后的所有单元格为空或空白。

const firstDayDate = moment(currentDate).startOf('month');this.initialEmptyCells = firstDayDate.weekday();const lastDayDate = moment(currentDate).endOf('month');this.lastEmptyCells = 6 - lastDayDate.weekday();

4.用户友好的可视化： (4. User friendly Visualization:)

Leveraging Moment.js and the css classes provided by Bulma, we map our gridArr to represent the calendar, highlighting today’s date, the selected start date, the selected end date and most importantly the range between the two.

利用Moment.js和Bulma提供的css类，我们映射了gridArr来表示日历，突出显示了今天的日期 ，选定的开始日期，选定的结束日期以及最重要的是两者之间的范围 。

Beginning from the start date all the way up to the end date, we add a key to the objects of the gridArr (obj) called inRange and set the value to true for all the days that fall in between. We apply the calendar-range css class to all the objects whose inRange value is true.

从开始日期一直到结束日期，我们将一个名为inRange的键添加到gridArr( obj )的对象中，并将介于此之间的所有日期的值设置为true。 我们将日历范围的 css类应用于inRange值为true的所有对象。

5.直觉行为 (5. Intuitive Behavior)

To decide the behavior of the date time range picker, I analyzed multiple scenarios where multiple dates are picked and existing date-pickers to zero in on the best of the lot. For example, any flight ticket booking page that requires picking the arrival and departure dates and the date-pickers that popular project management tools use.

为了确定日期时间范围选择器的行为，我分析了多个场景，其中选择了多个日期，并且在很多情况下将现有的日期选择器置零。 例如，任何需要预订到达和离开日期以及流行项目管理工具使用的日期选择器的机票预订页面。

And from the culmination of the research, I arrived at the following:

从研究的高潮中，我得出以下结论：

We indicate which date (start or end) is being picked by providing the container box a blue shadow. And going beyond the limits of the selected date flips them. i.e While choosing an end date, if we pick a date before the start date, we assign that date to be the start date and our existing start date becomes the new end date. In a similar fashion, the same logic applies while picking the start date as well. I maintained two modes namely, ‘start’ and ‘end’ as an indicator of which date (start or end) is currently being picked.

我们通过为容器框提供一个蓝色阴影来指示选择哪个日期(开始或结束)。 并超出所选日期的限制将其翻转。 即，在选择结束日期时，如果我们选择开始日期之前的日期，则我们将该日期指定为开始日期，而我们现有的开始日期将成为新的结束日期。 以类似的方式，在选择开始日期时也适用相同的逻辑。 我维护了“开始”和“结束”两种模式 ，以指示当前选择哪个日期(开始或结束)。

Exception: What happens if we pick an end date equal to the start date? Or a a start date equal to the end date? We simply toggle the mode!

例外 ：如果我们选择结束日期等于开始日期会发生什么？ 还是开始日期等于结束日期？ 我们只需切换模式！

6. AM到PM，PM到AM funk (6. AM to the PM, PM to the AM funk)

I mean, We need a smart time picker. One way would be to maintain a bunch of select drop-downs that have options ranging from 1–12 for hours, 0–60 for minutes and AM & PM for the time format. And there we have it, the ugliest time picker ever.

我的意思是，我们需要一个聪明的时间选择器。 一种方法是维护一堆选择下拉菜单，这些下拉菜单的选择范围为1–12小时，0–60分钟，以及AM和PM时间格式。 我们拥有了有史以来最丑陋的时间选择器。

Okay. How about this? We take the entire field as an input text and handle all the possible ways that the user can enter the time. Sure. This should do for now. Note: For any invalid input to the time picker, we indicate with a red box shadow

好的。 这个怎么样？ 我们将整个字段作为输入文本，并处理用户可以输入时间的所有可能方式。 当然。 现在应该这样做。 注意：对于时间选择器的任何无效输入，我们用红色框阴影表示

7.对话很便宜，下面是代码： (7. Talk is cheap, here’s the code:)

Parent Component:

父组件 ：

Parent Component Template:

父组件模板 ：

Date Time Range Picker Component:

日期时间范围选择器组件：

Date Time Range Picker Template:

日期时间范围选择器模板：

Date Time Range Picker CSS:

日期时间范围选择器CSS：

8.一些依赖性： (8. Some Dependencies:)

Install Bulma and Moment.js:

安装Bulma和Moment.js：

npm install --save bulma moment

Launch your code editor, and as a first thing enable bulma css by adding this line “../node_modules/bulma/css/bulma.css” in the “styles” array in the angular-cli.json file.

启动代码编辑器，首先，通过在angular-cli.json文件的“样式”数组中添加以下行“ ../node_modules/bulma/css/bulma.css”来启用bulma css。

To add a proper calendar style to our datepicker, we need to grab this code from GitHub and save it in a file called bulma-calendar.min.css within our src folder and then make it available by adding another line in our angular-cli.json:

要为我们的日期选择器添加适当的日历样式，我们需要从GitHub中获取此代码 ，并将其保存在src文件夹中的bulma-calendar.min.css文件中，然后通过在angular-cli中添加另一行使其可用.json ：

And we’re all set.

我们都准备好了。

Head here to my GitHub to access the complete code.

头在这里我的GitHub上访问完整的代码。

Click Here to head to the tutorial that was greatly helpful in gathering the right tools to build this component.

单击此处转到该教程，该教程在收集用于构建此组件的正确工具方面非常有帮助。

And there we have it! A Date Time Range Picker capable of handling start and end dates along with the respective timestamps. There, now it’s simple!

我们终于得到它了！ 日期时间范围选择器，能够处理开始日期和结束日期以及相应的时间戳。 在那里，现在很简单！