如何生成一个能让用户使用JavaScript选择日期的输入字段
日期输入javascript样本
我们的日期输入将注意到闰年和有31天或30天的月份。
这意味着。
- 如果你选择了一个闰年，并且你选择了2月，那么天数将计算到29天。
- 如果你选择的是一月，天数就会数到31。
我们开始吧
我们将创建一个空白的HTML文件并添加选择字段；年、月、日。
我们将让这些字段为空，并使用它们各自的ID（标识符）在JavaScript中指代它们。
脚本
生成日期
为了生成天数，我们将从索引1开始，将数值递增到日历的最大天数，即31天，然后创建一个选项标签，将数值和文本都设置为我们当前的索引。
生成月份
为了生成月份，我们将从索引1开始，将值递增到日历中的最大月数（12），然后创建一个选项标签，将值和文本都设置为我们当前的索引。
生成年份
如果你仔细看一下年份选择元素，你会看到属性start和end。这些属性将帮助我们生成从指定的 起始索引到结束索引的年份。
重新生成日期
现在我们需要一个函数，使我们能够根据指定的长度重新生成天数。
这意味着，如果我们选择9月（09），天数将被重新生成，并将计算到30而不是31，因为9月有30天。
为了实现这一点，我们将在我们的函数中创建一个数组，该数组将存储从**（1-31）**开始的日子，然后根据指定的长度参数缩短该数组的长度。
现在，为了利用这个函数，我们需要创建另一个函数，以检查所选择的月份。
我们将在这个函数中使用switch语句，以检查所选的月份并适当地设置长度。
对于我们的最后一个函数，我们需要检查所选年份是否是闰年。
在高中时，我的数学老师告诉我，如果一个年份能被4整除，这意味着这一年是闰年。
例如，如果你用2020年除以4，你会得到一个整数（505）。这意味着，2020年是一个闰年。但如果你用2022年除以4，你将得到一个浮点数（505.5）。这意味着2022年不是一个闰年。
因此，在我们的函数中，我们将使用正则表达式检查我们的除法是整数还是浮点数，然后适当地重建我们的日子。
几乎完成了
现在我们需要给我们的月和年选择元素附加一个事件监听器，以便根据选择的值执行我们的函数。
我们还将确保在提供相同的值时不会执行两次函数，方法是将值保存到一个变量中。
因此，如果我们应该选择一个月份，例如9月，该函数将重建30天以内的日子。如果我们选择一个年份，例如2020年的闰年，该函数将检查所选月份是否为2月（2），并将重建天数至29天，因为在闰年的2月有29天。
测试我们的脚本
在一个空白的HTML页面中复制并粘贴这段代码，并尝试选择一个闰年+二月，一个有30天的月份。
2020年（闰年）+2月的月份
一月的月份
九月的月份
这证明了我们的脚本100%工作得很好。
如果你发现了一个错误，或者看到了我遗漏的东西，欢迎在下面留言。谢谢你的阅读!
你读过我之前写的关于如何使用JavaScript中的octaValidate库轻松验证表单字段的文章吗？如果你还没有，我建议你去看看 这里.
用独立组件构建，以获得速度和规模
与其构建单体应用，不如先构建独立的组件，并将它们组成功能和应用。它使开发更快，并帮助团队建立更一致和可扩展的应用程序。
像Bit这样的开放源码软件工具为构建独立组件和合成应用提供了很好的开发者体验。许多团队从构建他们的设计系统或微前端开始，通过独立组件。\
一个独立的产品组件：观看自动生成的依赖关系图
使用JavaScript轻松生成自定义日期字段输入最初发表在Medium上的Bits and Pieces中，人们通过强调和回应这个故事继续对话。
