bootstrap datePicker how to validate as required

Question

I use it-date-datepicker as picker for calendar. It's a boostrap-datepicker version based on ab-datepicker. The problem is that I want that this field to be mandatory. To do that I donwloaded jquery.validate.js too, but i can't figure out how to make it work. I didn't find nothing about date validation.

Any suggestion ?

Thanks in advance for your help

this is my html code:

 <form class="needs-validation" novalidate action="mysqlStuff.php" method="POST">
 <div class="col-md-3 mb-3 " >

 <!-- Default unchecked -->
    <div class="custom-control custom-radio myDivTop"style="padding-left: 5px" >
        <input type="radio" class="custom-control-input" id="male" name="gender" checked>
        <label class="custom-control-label" for="male">Male</label>
    </div>

    <!-- Default checked -->
    <div class="custom-control custom-radio myDivBottom" style="padding-left: 5px">
        <input type="radio" class="custom-control-input" id="female" name="gender" >
         <label class="custom-control-label" for="female">Female</label>
    </div>   
    
    <input class="form-control  it-date-datepicker  " id="date" type="text" name= "birthdate"  placeholder="gg/mm/aaaa" required>

    </div>
    <button class="btn btn-primary" id="invia" type="submit">Submit form</button>
   
  </form>

the poor javascript code is:

<script>
    $(document).ready(function() {
    $('.it-date-datepicker').datepicker({ 
        
       });
    });
</script>

Answer 1

Put required in the input tag and init validation

$(function() {
  $('.it-date-datepicker').datepicker();
  $(".needs-validation").validate();
});

DEMO