I am using jquery to create an inline date picker but the entire date picker
is only displayed. 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. I searched for the same on stackover but no luck.
<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;
}
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
HTML-
<input type="text" id="datepicker">
Script-
$( function() {
$( "#datepicker" ).datepicker();
});
Updated fiddle - https://jsfiddle.net/q1fwaevL/2/
You can refer api docs of jquery calendar here for other datepicker events- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.