2016-11-20 4 views
1

Ich muss ein JQuery Calendar-Steuerelement für Geburtsdatum Feld verwenden und standardmäßig Änderung im Kalender werden nur reflektiert, wenn Benutzer das Datum auswählt, während ich war fragte Änderungen vornehmen zu reflektieren, wenn entweder Benutzerkontrolle Monat, Datum oder Jahr im Kalender wähltJQuery Kalender für DOB, um Änderungen zu reflektieren, wenn Monat, Jahr oder Datum geändert wird

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" 
      }); 
     // }); 
    }); 

gibt es eine Eigenschaft, die ich so einstellen kann, dass, wann immer Benutzer wählen Sie ein Datum, Monat oder Jahr dann sollten die gleichen Änderungen in den txtDOB Eingabefeldern AKTUALISIERT widerspiegeln:

Ich habe es wie dieses

$(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

Können Sie noch einmal versuchen erklären, ich kann nicht verstehen, was Sie meinen - in Datumsauswahl Sie ein Datum auswählen nach dem Datum der Wahl, Monat, Jahr aber was erwartest du zu passieren? Was sind 'txtDOB' Eingabefelder? Keines Ihrer Felder ist benannt oder hat die ID 'txtDOB' –

Antwort

1

Wie über diese Lösung. Ich hoffe es hilft!

Hier ist eine aktualisierte 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>

Verwandte Themen