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>