JS需要html5的日期选择器

我正在尝试创建日期字段，并在点击时显示日期选择器，我正在使用materialize日期选择器。JS需要html5的日期选择器

我可以得到一个日期选择器弹出，但所需的html5标记不起作用。 JSFiddle

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 

 
<body> 
 
    <!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 

 
    <!-- Icons --> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
    <!--Let browser know website is optimized for mobile--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 

 
    <div class="col s12"> 
 
    <p></p> 
 
    </div> 
 
    <div class="col s12 m4 l2"> 
 
    <p></p> 
 
    </div> 
 
    <div class="col s12 m4 l8"> 
 
    <p></p> 
 
    <div class="row"> 
 
     <form> 
 
     <input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required> 
 
     <label for="check_in_date">Check In Date</label> 
 

 
     <input type="submit" value="Submit"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div class="col s12 m4 l2"> 
 
    <p></p> 
 
    </div> 
 

 

 

 
</body> 
 
<script> 
 
    $('.datepicker').pickadate({ 
 
    format: 'dd/mm/yyyy', 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    selectYears: 5, // Creates a dropdown of 15 years to control year 
 
    // editable: true 
 
    }); 
 
    $(document).ready(function() { 
 
    $('select').material_select(); 
 
    }); 
 
</script> 
 

 
</html>

如果我设置的日期选择器JS，磁场就需要编辑，但日期选取器不上点击显示（你必须按标签为它显示达）... JSFiddle

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 

 
<body> 
 
    <!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 

 
    <!-- Compiled and minified JavaScript --> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 

 
    <!-- Icons --> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
    <!--Let browser know website is optimized for mobile--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 

 
    <div class="col s12"> 
 
    <p></p> 
 
    </div> 
 
    <div class="col s12 m4 l2"> 
 
    <p></p> 
 
    </div> 
 
    <div class="col s12 m4 l8"> 
 
    <p></p> 
 
    <div class="row"> 
 
     <form> 
 
     <input id="check_in_date" name="check_in_date" type="date" name="check_in_date" class="datepicker" required> 
 
     <label for="check_in_date">Check In Date</label> 
 

 
     <input type="submit" value="Submit"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div class="col s12 m4 l2"> 
 
    <p></p> 
 
    </div> 
 

 

 

 
</body> 
 
<script> 
 
    $('.datepicker').pickadate({ 
 
    format: 'dd/mm/yyyy', 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    selectYears: 5, // Creates a dropdown of 15 years to control year 
 
    editable: true 
 
    }); 
 
    $(document).ready(function() { 
 
    $('select').material_select(); 
 
    }); 
 
</script> 
 

 
</html>

我怎样才能得到这两件事（日期选择器点击&必填字段）一起工作？

来源

2016-05-17 Anon957

在.datepicker上设置click处理程序，并使用pickadate.js的open函数和editable选项。

$(document).ready(function() { 
    var pickr = $('.datepicker').pickadate({ 
    format: 'dd/mm/yyyy', 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 5, // Creates a dropdown of 15 years to control year 
    editable: true 
    }); 
    $('select').material_select(); 
    $('.datepicker').click(function() { 
    pickr.pickadate('open'); 
    }); 
});

Updated Fiddle

编辑处理多个.datepicker S：

$(document).ready(function() { 
    $('.datepicker').each(function(){ 
    var pickr = $(this).pickadate({ 
     format: 'dd/mm/yyyy', 
     selectMonths: true, // Creates a dropdown to control month 
     selectYears: 5, // Creates a dropdown of 15 years to control year 
     editable: true 
    }); 

    $(this).click(function(){ 
     pickr.pickadate('open'); 
    }); 
    }); 

    $('select').material_select(); 
});

Another Fiddle

来源

2016-05-17 18:53:02

谢谢，这个工程我问，但是当我尝试添加2日期选择器字段中，只有一个em弹出与选择器。我如何修改JS以适应此？ [新的小提琴]（https://jsfiddle.net/4nnueksu/） – Anon957

管理解决2日期选择器错误如下[小提琴链接]（https://jsfiddle.net/prL6pgot/） – Anon957

嘿，对不起，我很慢作出回应 - 我用一个更清洁的解决方案更新了我的答案。 –

JS需要html5的日期选择器

回答

相关问题