如何使用jQuery在materializecss中设置日期

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>

我尝试在其工作的文本字段中设置值

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

我如何设定日期？

我试过这个

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

它没有用。然后我尝试了这个

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

设定日期，但重叠标签。

如何将其设置为不同的格式，如1995年6月17日

Answer 1

我通常不使用那种输入。你确定它返回一个可显示的值吗？尝试添加toString方法。

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

Answer 2

工作演示 - https://jsfiddle.net/dxbfhdzg/2/

对于重叠问题，

我已将<label>标记保留在<div>标记之前。

像这样，

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

用于格式化日期，如1995年6月17日，

初始化日期选择器时，您需要使用格式 attrubte，并且可以进一步使用 .set 方法设置 result.result.DoB < / strong>重视这样的事情，

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

这里的代码看起来像

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

但是当我在开发者控制台中查看时，我发现了这个

所以它也有一个新的div标签，active被添加到该元素中，但我们想要active标签到标签

所以请使用以下行

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

对于格式化，您可以使用javascript的get方法

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);

Answer 4

由于您已经成功设置了日期值，因此这里是针对重叠问题的。我将“ input-label”类添加到所有标签，然后只要输入框不为空，jQuery就会自动将“ active”类添加到标签以让位给值。像这样：

// my label
<label class="input-label" for="bday">Birthday</label>

// how to move up your label
$('.input-label').addClass('active');

// how to check all your inputs if they're empty or not
// if not, make the labels active
$('input[type="text"]').each(function(){
   if($(this).val() != ""){
        $("label[for='" + $(this).attr('name') + "']").addClass('active');
        // or if you want to target id instead
        $("label[for='" + $(this).attr('id') + "']").addClass('active');
   }
});