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

我是新来的HTML。我在询问日期月份和年份的输入类型作为标题。我想分别取得日期，月份和年份，如下所示：日期:(日期的下拉列表）月份:(月份的下拉列表）年份:(年份的下拉列表）年份：谢谢！分别在HTML中获取日期，月份和年份

2016-08-29 Nhân Nguyễn

是否有什么问题，我的问题？为什么你不喜欢它？ –

请[编辑]你的问题，以显示[你到目前为止所尝试的]（http://whathaveyoutried.com）。您应该包含您遇到问题的代码[mcve]，然后我们可以尝试帮助解决特定问题。你还应该阅读[问]。 –

好的，我会在下次修复它：D谢谢！ –

试试这个代码：

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>

来源

2016-08-29 09:32:47

下拉菜单可以使用select元素

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

（Source）

笔记中创建不同月份有不同天数的，所以你最终可能会指定如2月30失效日期，。

来源

2016-08-29 09:05:47 mvw

是的，我想到了。我们可以以某种方式检查它是否是有效的日期或某事？ –

如果在您要使用的HTML版本中没有更好的输入类型，并且您的浏览器支持该输入类型，则必须自行添加一些额外的逻辑。在浏览器中使用JavaScript（例如，在由select元素生成的数据更改事件期间灰显提交按钮：如果日期无效，或者：如果日期有效，则激活它）或在服务器端（拒绝输入，if它是无效的，并显示通知）。 – mvw

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

因为dayinput的下拉列表的数量取决于月份输入的数量。

你可以尝试这样的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>

来源

2016-08-29 09:14:37 Vincent

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

回答

相关问题