如何使用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

由于您已设法在此处设置日期值以解决重叠问题。我为所有标签添加了“input-label”类，然后每当输入框不为空时，jQuery 将自动向标签添加一个“活动”类以让位于该值。像这样：

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

Answer 2

这里的代码看起来像

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

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

对于重叠问题，

我在<div> 标签之前保留了<label> 标签。

这样，

<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 日这样的日期格式，

您需要在初始化日期选择器时使用 format 属性，并且您可以进一步使用 .set 方法来设置您的 result.result.DoB 重视这样的事情，

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 4

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

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