1

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
DiamondJoe12
  • 1,879
  • 7
  • 33
  • 81
  • 1
    Review the answers here: https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd?rq=1 – Bumhan Yu Aug 08 '21 at 18:39

1 Answers1

0
 <!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.

Web Admin
  • 11
  • 4