2016-11-20 4 views
1

Date of BirthフィールドのJQueryカレンダーコントロールを使用する必要があり、デフォルトでカレンダーの変更は、ユーザーのいずれかがカレンダーコントロール月、年、または日付が変更されたときにDOBがDOBの変更を反映するようにするためのJQueryのカレンダー

CodePen

<input name="txtdob" id="txtDOB" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text"> 

$(document).ready(function() { 
    // $(function() { 
      $("#txtdob").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'dd/mm/yy', 
       yearRange: "-90:+0" 
      }); 
     // }); 
    }); 

で月、日または年を選択したときに、私はそう設定することができます任意のプロパティがあります反映して変更を行うことが求められているとき、これまでユーザーを選択し、日付、月または年txtDOB入力フィールドに同じ変更が反映されている必要があります UPDATED:

私は、このソリューションについては、この

$(function() { 
      $("#txtDOB").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       dateFormat: 'dd/mm/yy', 
       yearRange: "-90:+0", 
       onChangeMonthYear: function (y, m, i) { 
        var d = i.selectedDay; 
        $(this).datepicker('setDate', new Date(y, m - 1, d)); 
       } 
      }); 
     }); 
+0

、私はあなたが何を意味するか理解できない - 日付ピッカーでは、日付を選択して日付を選択し、月、年ですが、何が起こると思いますか?また、 'txtDOB'入力フィールドとは何ですか?あなたのフィールドには名前がなく、IDが 'txtDOB'ではありません –

答えて

1

どのようにそれをやりました。それが役に立てば幸い!ここで

が更新さcodepenです:あなたがもう一度説明しようとすることはできhttp://codepen.io/HenryGranados/pen/ObWaXX

$(function() { 
 
    var date = new Date(); 
 
    var currentDay = date.getDate(); 
 
    $("#txtdob").datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    yearRange: "-90:+0", 
 
    onChangeMonthYear: function(year, month, inst) { 
 
     $(this).val(currentDay + "/"+month + "/" + year); 
 
    } 
 
    }); 
 
});
.rg-txt{ 
 
    width:200px; 
 
    margin:50px 200px; 
 
}
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 

 
<body> 
 
    <input name="txtdob" id="txtdob" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text"> 
 
</body> 
 

 
</html>

関連する問題