how to set date in input type datetime-local using jquery?

September 28, 2022

i want to set date with this format 2022-09-22T16:03 in input datetime-local when i click button Enregister but not work, i try this post 1link but not work also this link 2link not work.

     <link rel="icon" 
      type="image/png" 
      href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">       
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <div class="container main">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="exampleInputPassword1">Date de la tâche</label>
                    <input type="datetime-local" class="form-control" name="datee" id="date" required>
                </div>
            </div>
        </div>
        <div class="modal-footer ">
            <button  class="btn btn-success" id="add-event"><i class="fas fa-save"></i> Enregistrer </button>
        </div>          
        <script>
            $('#add-event').on("click", function(){
                 var date = "2022-09-22T16:03";
                 $("date").val(date);
                 console.log(date);
            });
        </script>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>

>Solution :

Change your selector, from $("date").val(date); to $("#date").val(date);

<link rel="icon" type="image/png" href="https://findicons.com/files/icons/2805/squareplex/512/google_calendar.png">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="exampleInputPassword1">Date de la tâche</label>
        <input type="datetime-local" class="form-control" name="datee" id="date" required>
      </div>
    </div>
  </div>
  <div class="modal-footer ">
    <button class="btn btn-success" id="add-event"><i class="fas fa-save"></i> Enregistrer </button>
  </div>
  <script>
    $('#add-event').on("click", function() {
      var date = "2022-09-22T16:03";
      $("#date").val(date);
      console.log(date);
    });
  </script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>