ryh*_*112 1 html javascript css datepicker materialize
我想在单击按钮时显示日期选择器。我试过了，但我无法让它工作。我正在使用 Materialise Css。我曾尝试使用输入类型文本，但我不想要它。
<div class="container">
<div class="row center">
<i>Date</i>
<button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
</div>
</div>
jQuery：
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
为了从按钮显示日期选择器，您需要调用 show 选项。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
function show_dp(){
$( "#datepicker" ).datepicker('show'); //Show on click of button
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="show_dp();">Show Datepicker</button>
</body>
</html>另一个选项可以使您不需要输入字段：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function toggle_dp() {
dp = $("#datepicker");
if (dp.attr('datepicker')) {
dp.datepicker('destroy');
dp.removeAttr('datepicker');
} else {
dp.datepicker();
dp.attr('datepicker', 1);
}
}
</script>
</head>
<body>
<div id="datepicker"></div>
<button id="button" onclick="toggle_dp();">Toggle Datepicker</button>
</body>
</html>| 归档时间： |
|
| 查看次数： |
13109 次 |
| 最近记录： |