[英]Inline date picker not working using jquery/html
我正在使用jquery创建内联日期选择器,但仅显示整个date picker
。 它甚至不会改变几个月。 我希望它显示单击日历天的日期。
单击日期选择器时应显示日期,但在input
字段中未显示任何更改。 我在stackover上搜索了相同的内容,但没有运气。
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-
ui.min.js"></script>
<a href="blog/2015/08/jquery-bootstrap-icons.download.html" data-icon="download-alt"></a>
<div>
<div class="ids" id="1" style="float:left; clear:both">
<b style="color: #444444">Date</b>
<input id="enterdate" class="duedatetextbox" data-inline = "true" type="text" placeholder="Enter date" tabindex="101" disabled>
<div id= "setdate" style = "margin-left:0px;">
</div>
</div>
<div class="ids" id="2" style="float:left;">
<b style="color: #444444">Time</b>
<input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102">
</div>
</div>
jQuery:
<script type ="text/javascript">
//date picker
$('#setdate').datepicker({
inline: true,
altField: '#d'
});
$('#enterdate').change(function(){
$('#setdate').datepicker('setDate', $(this).val());
});
function adddescription()
{
$(`.description`).show();
$('.cardgutterrow').hide();
}
</script>
的CSS
div.ids {
width: 50%;
}
div.ids b {
display: block;
}
div.ids input {
display: block;
padding: 10px;
background: whitesmoke;
border: solid 1px grey;
border-radius: 3px;
}
您尚未正确初始化日期选择器。 我删除了一些额外的代码,并添加了jquery-ui.min.css来正确设置日历的样式
HTML-
<input type="text" id="datepicker">
脚本-
$( function() {
$( "#datepicker" ).datepicker();
});
更新的小提琴-https: //jsfiddle.net/q1fwaevL/2/
您可以在此处参考jquery日历的api文档以了解其他datepicker事件-http : //api.jqueryui.com/datepicker/
$('#setdate').datepicker({ inline: true, altField: '#d', onSelect: onDateChange }); function onDateChange(dateText, inst) { $("#enterdate").val(dateText); }
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <div> <div class="ids" id="1" style="float:left; clear:both"> <b style="color: #444444">Date</b> <input id="enterdate" class="duedatetextbox" data-inline = "true" type="text" placeholder="Enter date" tabindex="101" disabled> <div id= "setdate" style = "margin-left:0px;"> </div> </div> <div class="ids" id="2" style="float:left;"> <b style="color: #444444">Time</b> <input class="duedatetextbox" type="text" placeholder="Enter time" tabindex="102"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.