Example 1
$form = new Form('plugins-pickadate-form-1', 'horizontal');
$form->addInput('text', 'user-pickadate', '', 'Date', 'required');
$form->addPlugin('pickadate', '#user-pickadate');
<div class="row mb-3">
<label for="user-pickadate" class="col-sm-4 col-form-label">
Date <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="user-pickadate" name="user-pickadate" type="text" value="" required class="form-control">
</div>
</div>
Example 2 - Preselect a date
$form = new Form('plugins-pickadate-form-2', 'horizontal');
$form->addInput('text', 'user-pickadate-2', '2019-04-26', 'Date', 'data-format=yyyy-mm-dd, required');
$form->addPlugin('pickadate', '#user-pickadate-2');
<div class="row mb-3">
<label for="user-pickadate-2" class="col-sm-4 col-form-label">
Date <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="user-pickadate-2" name="user-pickadate-2" type="text" value="2019-04-26" data-format="yyyy-mm-dd" required class="form-control">
</div>
</div>
Example 3 - Minimum date set to the current day, maximum date += 1 month
$form = new Form('plugins-pickadate-form-3', 'horizontal');
$now = new DateTime('now');
$date_start = $now->format('Y-m-d');
$date_end = $now->modify('+1 month')->format('Y-m-d');
$form->addInput('text', 'user-pickadate-3', '', 'Date', 'data-min=' . $date_start . ', data-max=' . $date_end . ', required');
<div class="row mb-3">
<label for="user-pickadate-3" class="col-sm-4 col-form-label">
Date <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="user-pickadate-3" name="user-pickadate-3" type="text" value="" data-min="2025-03-16" data-max="2025-04-16" required class="form-control">
</div>
</div>
Example 4 - Date with custom Submit Format, Year & Month dropdown selector
$form = new Form('plugins-pickadate-form-4', 'horizontal');
$form->addInput('text', 'user-pickadate-4', '', 'Date', 'data-format-submit=Y-m-d, data-select-years=true, data-select-months=true, required');
$form->addPlugin('pickadate', '#user-pickadate-4');
<div class="row mb-3">
<label for="user-pickadate-4" class="col-sm-4 col-form-label">
Date <sup class="text-danger">* </sup>
</label>
<div class="col-sm-8">
<input id="user-pickadate-4" name="user-pickadate-4" type="text" value="" data-format-submit="Y-m-d" data-select-years="true" data-select-months="true" required class="form-control">
</div>
</div>