HTMLで日付、月、年を別々に取得

私はhtmlを初めて使っています。タイトルの日付と年の入力タイプについて質問しています。日付:(日付のドロップダウンリスト）月：（月のドロップダウンリスト）年：（年のドロップダウンリスト）。次のように日付、月、年を別々に取得したい。ありがとうございました！HTMLで日付、月、年を別々に取得

出典

2016-08-29 Nhân Nguyễn

私の質問に何か問題ありますか？なぜあなたはそれをdownvote？ –

[あなたがこれまでに試したこと]（http://whathaveyoutried.com）を表示するようあなたの質問を編集してください。問題のあるコードの[mcve]を含める必要があります。次に、特定の問題を解決するために役立つことができます。 [ask]も読んでください。 –

さて、私は次回修正します：Dありがとう！ –

：

次のようなHTML5日付入力コントロールを試すことができます

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要素によって生成されたデータ変更イベント中に送信ボタンをグレイアウトするなど）、または日付が有効な場合はそれを有効にするか、サーバー側で（入力を拒否するそれは無効であり、通知を表示しています）。 – mvw

純粋なhtmlで日付を取得することは容易ではありません。

monthinputに応じてdayinputのドロップダウンリストの数はいくらですか？このコードを試してみてください

<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で日付、月、年を別々に取得

答えて

関連する問題