Question

我是html的新手。我问日期月份和年份的输入类型作为标题。我希望将日期，月份和年份彼此分开，如下所示：日期:(日期下拉列表）月份:(月份下拉列表）年份:(年份下拉列表）。谢谢！

Answer 1

可以使用select元素

创建下拉菜单

 <select name="day">
  <option value="1">01</option>
  <option value="2">02</option>
   .
   .
  <option value="31">31</option>
</select>

（Source）

请注意，不同月份的天数不同，因此最终可能会指定无效日期，例如2月30日。

Answer 2

通过纯HTML来获取日期并不容易。

因为dayinput的下拉列表的数量取决于monthinput。

您可以尝试html5日期输入控件，如下所示：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hey</title>
        <script type="text/javascript">
            'use strict';

            function getMyDate() {
                var dateInput = document.getElementById('date');
                var myDate = dateInput.value;
                var myDateArray = myDate.split('-');
                var year = myDateArray[0];
                var month = myDateArray[1];
                var day = myDateArray[2];

                alert(year)
                alert(month)
                alert(day)
            }

        </script>
    </head>
    <body>
    <input type="date" id="date"/>
    <input type="button" value="clickme" onclick="getMyDate()"></body>
    </body>
    </html>

Answer 3

试试这段代码：

var s,
      DateWidget = {
        settings: {
          months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'],
          day: new Date().getUTCDate(),
          currMonth: new Date().getUTCMonth(),
          currYear: new Date().getUTCFullYear(),
          yearOffset: 21,
          containers: $(".dateDropdown")
        },

        init: function() {
          s = this.settings;
          DW = this;
          s.containers.each(function(){
            DW.removeFallback(this);
            DW.createSelects(this);
            DW.populateSelects(this);
            DW.initializeSelects(this);
            DW.bindUIActions();
          })
        },

        getDaysInMonth: function(month, year) {
           return new Date(year, month, 0).getDate();
        },

        addDays: function(daySelect, numDays){
          $(daySelect).empty();

          for(var i = 0; i < numDays; i++){
            $("<option />")
              .text(i + 1)
              .val(i + 1)
              .appendTo(daySelect);
          }
        },

        addMonths: function(monthSelect){
          for(var i = 0; i < 12; i++){
            $("<option />")
              .text(s.months[i])
              .val(s.months[i])
              .appendTo(monthSelect);
          }
        },

        addYears: function(yearSelect){
          for(var i = 0; i < s.yearOffset; i++){
            $("<option />")
              .text(i + s.currYear)
              .val(i + s.currYear)
              .appendTo(yearSelect);
          }
        },

        removeFallback: function(container) {
          $(container).empty();
        },

        createSelects: function(container) {
          $("<select class='day'>").appendTo(container);
          $("<select class='month'>").appendTo(container);
          $("<select class='year'>").appendTo(container);
        },

        populateSelects: function(container) {
          DW.addDays($(container).find('.day'), DW.getDaysInMonth(s.currMonth, s.currYear));
          DW.addMonths($(container).find('.month'));
          DW.addYears($(container).find('.year'));
        },

        initializeSelects: function(container) {
          $(container).find('.day').val(s.day);
          $(container).find('.currMonth').val(s.month);
          $(container).find('.currYear').val(s.year);
        },

        bindUIActions: function() {
          $(".month").on("change", function(){
            var daySelect = $(this).prev(), 
                yearSelect = $(this).next(),
                month = s.months.indexOf($(this).val()) + 1,
                days = DW.getDaysInMonth(month, yearSelect.val());
            DW.addDays(daySelect, days);
          });

          $(".year").on("change", function(){
            var daySelect = $(this).prev().prev(), 
                monthSelect = $(this).prev(),
                month = s.months.indexOf(monthSelect.val()) + 1,
                days = DW.getDaysInMonth(month, $(this).val());
            DW.addDays(daySelect, days);
          });
        }
      };

      DateWidget.init();

div{ margin:15px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="dateDropdown">
      <label for="dateField1">Please enter the date:</label>
      <input id="dateField1" type="text" placeholder="dd.mm.yyyy"/>
    </div>

在HTML中分别获取日期，月份和年份

3 个答案: