I'm trying to get Bootstrap datepicker to display in string format, i.e. August 8, 2021 (i.e. in the input bar). But I want the actual date values to be formatted yyyy-mm-dd.
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<input style= "font-size:14px"id="datepicker">
Javascript:
$('#datepicker').datepicker({
weekStart: 1,
autoclose: true,
format: 'yyyy-mm-dd',
startDate: new Date(),
Readonly: true,
});
$('#datepicker').datepicker("setDate", new Date());
$(function() {
$("#datepicker").datepicker();
$("#datepicker").val();
$("#datepicker").on("change",function(){
selectedDate = $(this).val();
update(selectedDate)
console.log("datepicker selectedDate is", selectedDate)
return selectedDate
});
What is the easiest way to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<input style= "font-size:14px"id="datepicker">
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
autoclose: true,
format: 'yyyy-mm-dd',
startDate: new Date(),
Readonly: true,
});
$('#datepicker').change(function(){
var a = $(this).val();
console.log(a);
});
</script>
</body>
</html>
by the above code, you can get a date in yyyy/mm/dd format. there is some issue with your js match with my code and fix that.