如何在 HTML 中使用月份输入类型?

front end technologyhtmlweb development更新于 2025/4/1 12:28:17

在 HTML 中，表单由各种元素组成，这些元素有助于在网页中构建用户界面。我们可以利用这些元素来收集各种自然属性。

最常用的控件之一是 Month 控件，即 <input type="month">

此控件基本上为用户提供了一个类似日历的下拉菜单，用户可以从中选择月份和年份。Month 控件允许您以 YYYY-MM 的格式选择日期，其中 YYYY 表示年份，MM 表示月份。

让我们看一个 Month 控件的简单示例。

示例


<html>
<body>
   <form name="form1">
      <label for="adm">Date of Admission:</label>
      <input type="month" name="doa">
   </form>
</body>
</html>

执行上述代码后，页面上将显示一个月份控件。

点击控件右侧的日历图标，将打开完整的月份日历，如下所示:-

下拉菜单打开后，您可以从日历中选择月份和年份，也可以在控件中直接输入月份和年份。

选择月份和年份后，它将以字符串类型的值存储。

让我们创建一个程序，使用 JavaScript 显示控件中选定的月份和年份。

示例


<html>
<head>
   <title>Admission Form</title>
   <script>
      function display(){
         d=form1.doa.value;
         document.write("<center><b>Date of Admission is "+d 
         +"</b></center>");
      }
   </script>
   <form name="form1">
 	   <label for="adm">Date of Admission:</label>
	   <input type="month" name="doa" onchange="display()">
   </form>
<html>

在此程序中，我们使用 <script> 标签编写 JavaScript 代码，并在其中创建一个函数，用于在触发 onchange() 事件时显示所选月份。当从控件中选择一个日期值时，将触发 onchange 事件。document.write() 将在下一页显示该值。我们使用 <HTML> 格式化标签在格式化输出中显示了入学日期。

它以 YYYY-MM 格式显示日期值。

我们还可以在点击提交按钮时显示输出。在本例中，我们将使用提交按钮的 onclick() 事件，而不是 onchange()。

示例


<html>
<head>
   <title>Admission Form</title>
   <script>
      function display(){
         d=form1.doa.value;
         document.write("<center><b>Date of Admission is "+d
         +"</b></center>");
      }
   </script>
   <form name="form1">
      <label for="adm">Date of Admission:</label>
      <input type="month" name="doa">
      <br>
      <input type="submit" value="Submit" onclick="display()">
   </form>
<html>

我们还可以设置浏览器加载网页时显示的月份和年份的默认值。为此，我们可以在 <input> 标签中使用 value 属性。

示例


<html>
<body>
   <form>
      <p>
         Select a month: <input type="month" name="selectedmonth"  value="1980-12">
         <br>
         <input type="submit" value="Send data">
      </p>
   </form>
</body>
</html>

一旦执行此程序，它将在月份控件中显示"1980 年 12 月"作为默认值。

接下来是一个非常有趣的部分，即设置日期范围，这意味着用户只能输入范围内的日期值，否则程序将显示错误消息。

示例


<html>
<body>
   <form>
      <p>
         Select a month: <input type="month" name="selectedmonth"       value="1980-12" min="1980-12" max="1981-11">
         <br>
         <input type="submit" value="Send data">
      </p>
   </form>
</body>
</html>

在此程序中，您可以观察到只有十二月(1980 年)处于活动状态，其他月份均处于禁用状态。同样，当您输入年份 1981 时，由于我们设置了范围，因此系统会显示截至十一月的月份。

如果用户输入了无效的月份或年份名称，则会显示如下错误消息:

我们还可以使用 step 属性，在设置日期范围时，我们可以跳过给定年份的某些月份。请看下面的活动注册表单示例，其中假设某个特定活动属于特定月份。

示例


<html>
<body>
   <form name="form1">
      <table>
      <tr>
         <td><label for="adm">Choose Event :</label></td>
         <td><select name="event">
            <option>Live Concert
            <option>Olympics in Beijing
            <option>World Series(Baseball)
            </select>
         </td>
      </tr>
      <tr>
         <td>
         <label for="adm">Available Event Dates:</label></td>
         <td><input type="month" name="eventdate" step="3"></td>
      </tr>
      <tr>
         <td></td><td><input type="submit" value="Submit"></td>
      </tr>
   </form>
</body>
</html>