How to validate start date and end date in bootstrap datepicker

You can validate the start date and end date in the bootstrap datepicker. The end date must be after the date selected in the start date.

Answers 1
  • Start date and end date validation in bootstrap datepicker

    Bootstrap date picker CDN

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    

    HTML (Input date)

    <div class="form-group">
        <label for="startDate">Start Date *</label>
        <input type="text" class="form-control" name="start_date" id="startDate" value="" />
    </div>
    
    <div class="form-group">
        <label for="endDate">End Date *</label>
        <input type="text" class="form-control" name="end_date" id="endDate" value="">
    </div>
    

    javascript

    
    <script>
    //Start date and end date
    var start = new Date();
    // set end date to max one year period:
    var end = new Date(new Date().setYear(start.getFullYear()+1));
    
    $('#startDate, #endDate').datepicker('setDate', start );
    $('#startDate').datepicker({
        startDate : start,
        format: "yyyy-mm-dd",
        todayHighlight: true,
        autoclose: true,
        endDate   : end
    // update "toDate" defaults whenever "fromDate" changes
    }).on('changeDate', function(){
        // set the "toDate" start to not be later than "fromDate" ends:
        $('#endDate').val("").datepicker("update");
        $('#endDate').datepicker('setStartDate', new Date($(this).val()));
    }); 
    
    $('#endDate').datepicker({
        startDate : start,
        format: "yyyy-mm-dd",
        todayHighlight: true,
        endDate   : end
    }); 
    </script>
    
    0
  • Back to code snippet queries related bootstrap