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的日期選擇器

回答

相關問題