Wie Datum in materializecss einstellen jQuery

Question

<div class="input-field col s4" style="max-height: 58px;"> 
        <input id="email" name="email" type="email" maxlength="30" class="validate" required length='30' disabled="true"> 
        <label for="email" data-error="Invalid Email ID">Email ID</label> 
       </div> 
<div class="input-field col s4" style="max-height: 58px;"> 
        <input id="dob" name="dob" type="date" class="datepicker" required> 
        <label for="dob" data-error="Invalid Date of Birth">Date of Birth</label> 
       </div> 

Ich habe versucht, Werte in Textfeldern setzen es

arbeitete

$('#email').attr('value', result.result.Email); 
$('#email').next().addClass('active'); 

Wie werde ich Datum festgelegt?

Ich habe versucht, diese

$('#dob').attr('value', result.result.DoB); 
$('#dob').next().addClass('active'); 

Es hat nicht funktioniert. Dann habe ich es versucht

$('#dob').val(result.result.DoB); 
$('#dob').next().addClass('active'); 

Es ist Datum, aber seine überlappende Bezeichnung.

Auch, wie es aus wie 17. Juni in verschiedene Formate zu setzen, 1995

Answer 1

ich in der Regel nicht, dass die Art der Eingabe verwenden. Sind Sie sicher, dass ein anzeigbarer Wert zurückgegeben wird? Versuchen Sie, die ToString-Methode hinzuzufügen.

$('#dob').val(result.result.DoB.toString()); 
$('#dob').next().addClass('active'); 

Answer 2

Arbeits DEMO - https://jsfiddle.net/dxbfhdzg/2/

Für die überlappende Ausgabe

Ich habe die <label> Tags vor den <div> Tags gehalten.

Wie diese

<label for="email" data-error="Invalid Email ID">Email ID</label> 
<div class="input-field col s4" style="max-height: 58px;"> 
    <input id="email" name="email" type="email" maxlength="30" class="validate" required length='30'> 
</div> 
<label for="dob" data-error="Invalid Date of Birth">Date of Birth</label> 
<div class="input-field col s4" style="max-height: 58px;"> 
    <input type="date" class="datepicker"> 
</div> 

Und für die Formatierung das Datum wie 17. Juni 1995,

Sie benötigen die Format attrubte zu verwenden, während die Datumsauswahl zu initialisieren, und Sie können die Verwendung weiter Die .set Methode, um Ihre result.result einzustellen.DoB Wert so etwas,

var $input = $('.datepicker').pickadate({ 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 15, // Creates a dropdown of 15 years to control year 
    format: 'mmmm dd, yyyy' }); 

var picker = $input.pickadate('picker'); 
picker.set('select', new Date('17 June, 1995')); 

Answer 3

Hier sieht Code wie

<div class="input-field col s4" style="max-height: 58px;"> 
        <input id="studentDOB" name="studentDOB" type="date" class="datepicker" required> 
        <label for="studentDOB" data-error="Invalid Date of Birth">Date of Birth</label> 
       </div> 

Aber wenn ich in Entwickler-Konsole überprüft, fand ich diese

So hat es ein bekam new div tag auch und active wurde in dieses Element hinzugefügt, aber wir wollen active Tag in Label

verwenden, um die folgende Zeile

$('#studentDOB').parent().children('label').addClass('active');

Für Formatierung können Sie Methode von Javascript verwenden bekommen

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
d = new Date(result.result.DoB); 
date = d.getDate() + " " + monthNames[d.getMonth()] + ", " + d.getFullYear(); 
$('#studentDOB').val(date);