How to use Datepicker

There are a few steps for us to implement datepicker into our form. Firstly, you must know which version of bootstrap used. For this tutorial, I used bootstrap 4. Therefore, it is not suitable for other bootstrap.

• Copy the script below into your form and put in at the bottom of your coding section

<!-- Date Picker -->

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css

/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlS

AwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/\

javascript"></script>

<link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet"

type="text/css" />

<script>

$('#datepicker1').datepicker({

uiLibrary: 'bootstrap4',

format: 'dd-mm-yyyy'

});

$('#datepicker2').datepicker({

uiLibrary: 'bootstrap4',

format: 'dd-mm-yyyy'

});

</script>

• Then, put the input type inside the coding

<div class="col-md-6">

<input id="datepicker1" width="276" name="invoice_date" value="<?php echo(lang('invoice_date')) ?>" /><br>

<input id="datepicker2" width="276" name="due_date" value="<?php echo(lang('invoice_due')) ?>" /><br>

</div>

The Output :