[英]Inline date picker not working using jquery/html
I am using jquery to create an inline date picker but the entire date picker
is only displayed. 我正在使用jquery创建内联日期选择器,但仅显示整个
date picker
。 It does not even change months. 它甚至不会改变几个月。 I want it to display the date when calendar day is clicked.
我希望它显示单击日历天的日期。
The datepicker should display the date when clicked but no changes are shown in the input
field. 单击日期选择器时应显示日期,但在
input
字段中未显示任何更改。 I searched for the same on stackover but no luck. 我在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: 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 的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;
}
You have not initialized the date-picker correctly. 您尚未正确初始化日期选择器。 I have removed some extra piece of code and added jquery-ui.min.css for proper styling of calendar
我删除了一些额外的代码,并添加了jquery-ui.min.css来正确设置日历的样式
HTML- HTML-
<input type="text" id="datepicker">
Script- 脚本-
$( function() {
$( "#datepicker" ).datepicker();
});
Updated fiddle - https://jsfiddle.net/q1fwaevL/2/ 更新的小提琴-https: //jsfiddle.net/q1fwaevL/2/
You can refer api docs of jquery calendar here for other datepicker events- http://api.jqueryui.com/datepicker/ 您可以在此处参考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.