Example 1 - Simple date picker
$form = new Form('plugins-material-datepicker-form-1', 'horizontal');
$form->addInput('text', 'm-date', '', 'Date: ', 'required');
$form->addPlugin('material-datepicker', '#m-date');
<div class="row mb-3">
<label for="m-date" class="col-sm-4 col-form-label">
Date: <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="m-date" name="m-date" type="text" value="" required class="form-control">
</div>
</div>
Example 2 - Default date selected, date and year ranges
$form = new Form('plugins-material-datepicker-form-2', 'horizontal');
$form = new Form($form_id, 'horizontal');
$form->addInput('text', 'm-date-2', '', 'Date: ', 'data-default-date=2021\, 11\, 19, data-set-default-date=true, data-min-date=2021\, 01\, 01, data-max-date=2023\, 12\, 31, required');
$form->addPlugin('material-datepicker', '#m-date-2');
<div class="row mb-3">
<label for="m-date-2" class="col-sm-4 col-form-label">
Date: <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="m-date-2" name="m-date-2" type="text" value="" data-default-date="2021, 11, 19" data-set-default-date="true" data-min-date="2021, 01, 01" data-max-date="2023, 12, 31" required class="form-control">
</div>
</div>
Example 3 - Translation (i18n)
$form = new Form('plugins-material-datepicker-form-3', 'horizontal');
$form->addInput('text', 'm-date-3', '', 'Date: ', 'required');
$form->addPlugin('material-datepicker', '#m-date-3', 'default', array('language' => 'fr_FR'));
// We cannot show the datepicker translated here
// because using several different languages on the same page will throw an error.