Explaination
I am successfully using an 'input type=date' as a datepicker in bootstrap 5.3, to select the date for data viewing.
The problem that i have is: i have to click on it to be visible.
For my situation, it has to be always visible, like a javascript calendar.
Question
How can this be achieved?
The code
<form id="Create" method="post" asp-page-handler="CreateDate" >
<input class="btn btn-secondary " type="date" name='newdate' onchange='this.form.submit()' >
As the built-in HTML input type="date" doesn't support always being visible. You can integrate the Bootstrap Datepicker and make it always visible.
$(document).ready(function(){
$('.datepicker-container').datepicker({
format: 'yyyy-mm-dd',
todayHighlight: true,
autoclose: true
}).on('changeDate', function(e) {
$('#newdate').val(e.format('yyyy-mm-dd')).change();
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datepicker Always Visible</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form id="Create" method="post" asp-page-handler="CreateDate">
<div class="datepicker-container"></div>
<input type="hidden" name="newdate" id="newdate" onchange="this.form.submit()">
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>Use the below CDN links and the below function to call the date input
$('#datepkr').datepicker({
uiLibrary: 'bootstrap5'
});<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<input id="datepkr" width="280" />use all cdn
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
use this input date and this script
<div class="container mt-5">
<input type="text" id="datepicker" class="form-control">
</div>
<script>
$(document).ready(function(){
$('#datepicker').datepicker({
autoclose: true
});
$('#datepicker').datepicker('show');
});
</script>