分別在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中獲取日期，月份和年份

回答

相關問題