Example 1 - Single Date selector with minimum options
$form = new Form('plugins-litepicker-form-1', 'horizontal');
$form->addInput('text', 'my-date', '', 'Choose the date:', 'data-litepick=true');
<div class="row mb-3">
<label for="my-date" class="col-sm-4 col-form-label">
Choose the date:
</label>
<div class="col-sm-8">
<input id="my-date" name="my-date" type="text" value="" data-litepick="true" class="form-control">
</div>
</div>
Example 2 - Date range selector with minimum options
$form = new Form('plugins-litepicker-form-2', 'horizontal');
$form->addInput('text', 'my-daterange', '', 'Choose the start and end dates:', 'data-litepick=true, data-single-mode=false, data-number-of-columns=2, data-number-of-months=2');
<div class="row mb-3">
<label for="my-daterange" class="col-sm-4 col-form-label">
Choose the start and end dates:
</label>
<div class="col-sm-8">
<input id="my-daterange" name="my-daterange" type="text" value="" data-litepick="true" data-single-mode="false" data-number-of-columns="2" data-number-of-months="2" class="form-control">
</div>
</div>
Example 3 - Date range selector with a minimum date (now) and a custom format
$form = new Form('plugins-litepicker-form-3', 'horizontal');
// set minimum date
$now = new DateTime('now');
$date_min = $now->format('Y-m-d');
$form->addInput('text', 'my-daterange-2', '', 'Choose the start and end dates', 'data-litepick=true, data-single-mode=false, data-number-of-columns=2, data-number-of-months=2, data-min-date=' . $date_min . ', data-format=DD MMMM YYYY');
<div class="row mb-3">
<label for="my-daterange-3" class="col-sm-4 col-form-label">
Choose the start and end dates
</label>
<div class="col-sm-8">
<input id="my-daterange-3" name="my-daterange-3" type="text" value="" data-litepick="true" data-single-mode="false" data-number-of-columns="2" data-number-of-months="2" data-min-date="2025-03-16" data-format="DD MMMM YYYY" class="form-control">
</div>
</div>
Example 4 - Date range selector with a minimum date, a custom format and start date / end date in 2 separate fields
$form = new Form('plugins-litepicker-form-4', 'vertical');
// set minimum date
$now = new DateTime('now');
$date_min = $now->format('Y-m-d');
$form->addInput('text', 'pick-up-date', '', 'Pick-up Date', 'data-litepick=true, data-single-mode=false, data-number-of-columns=2, data-number-of-months=2, data-min-date=' . $date_min . ', data-format=YYYY-MM-DD, data-element-end=drop-off-date, data-split-view=true, required');
$form->addInput('text', 'drop-off-date', '', 'Drop-off Date', 'readonly, required');
<div class="bs5-form-stacked-element mb-3">
<label for="pick-up-date" class="form-label">
Pick-up Date <sup class="text-danger">* </sup>
</label>
<input id="pick-up-date" name="pick-up-date" type="text" value="" data-litepick="true" data-single-mode="false" data-number-of-columns="2" data-number-of-months="2" data-min-date="2025-03-16" data-format="YYYY-MM-DD" data-element-end="drop-off-date" data-split-view="true" required class="form-control">
</div>
<div class="bs5-form-stacked-element mb-3">
<label for="drop-off-date" class="form-label">
Drop-off Date <sup class="text-danger">* </sup>
</label>
<input id="drop-off-date" name="drop-off-date" type="text" value="" readonly required class="form-control">
</div>
Example 5 - Date picker with Months & Years dropdown selectors
$form = new Form('plugins-litepicker-form-5', 'horizontal');
$form->addInput('text', 'birth_date', '', 'Birth Date', 'placeholder=click to open calendar, data-litepick=true, data-select-forward=false, data-dropdown-min-year=1920, data-dropdown-months=true, data-dropdown-years=true');
<div class="row mb-3">
<label for="birth_date" class="col-sm-4 col-form-label">
Birth Date
</label>
<div class="col-sm-8">
<input id="birth_date" name="birth_date" type="text" value="" placeholder="click to open calendar" data-litepick="true" data-select-forward="false" data-dropdown-min-year="1920" data-dropdown-months="true" data-dropdown-years="true" class="form-control">
</div>
</div>