Check with your designers to help you design this section
Check with your designers to help you design this section
Datepicker is using Bootstrap Datepicker 1.8.0. In addition to RAUL-specific instruction found here, more information is available from Datepicker at: https://bootstrap-datepicker.readthedocs.io/en/latest/index.html .
The following datepicker shows the most basic usage.
<div class="form-group">
<label for="raul-simple-datepicker">
Some title
</label>
<input
class="form-control form-control-date"
type="text"
id="raul-simple-datepicker"
name="raul-simple-datepicker"
placeholder="Pick Date"
/>
</div>
$('#raul-simple-datepicker').datepicker({
format: 'M. d, yyyy'
});
<div id="raul-inline-datepicker"></div>
<input type="hidden" id="raul-inline-datepicker-input">
$('#raul-inline-datepicker').datepicker({
format: 'M. d, yyyy'
});
$('#raul-inline-datepicker').on('changeDate', function() {
$('#raul-inline-datepicker-input').val(
$('#raul-inline-datepicker').datepicker('getFormattedDate');
);
});
<div id="raul-date-range-picker" class="input-daterange">
<div class="form-group">
<label for="raul-date-range-picker-start">
Start Date
</label>
<input
class="form-control form-control-date datepicker-range-start"
type="text"
id="raul-date-range-picker-start"
name="raul-date-range-picker-start"
placeholder="Pick Date"
/>
</div>
<div class="form-group">
<label for="raul-date-range-picker-end">
End Date
</label>
<input
class="form-control form-control-date datepicker-range-end"
type="text"
id="raul-date-range-picker-end"
name="raul-date-range-picker-end"
placeholder="Pick Date"
/>
</div>
</div>
$('#raul-date-range-picker').datepicker({
format: 'M. d, yyyy',
inputs: $('#raul-date-range-picker').find('.datepicker-range-start, .datepicker-range-end')
});
<div id="raul-date-range-picker-grouped">
<div class="input-group input-daterange">
<label for="raul-date-range-picker-grouped-start" class="sr-only">
Start Date
</label>
<input
class="form-control form-control-date datepicker-range-start"
type="text"
id="raul-date-range-picker-grouped-start"
name="raul-date-range-picker-grouped-start"
placeholder="Pick Date"
/>
<div class="input-group-prepend">
<div class="input-group-text">
to
</div>
</div>
<label for="raul-date-range-picker-grouped-end" class="sr-only">
End Date
</label>
<input
class="form-control form-control-date datepicker-range-end"
type="text"
id="raul-date-range-picker-grouped-end"
name="raul-date-range-picker-grouped-end"
placeholder="Pick Date"
/>
</div>
</div>
$('#raul-date-range-picker-grouped').datepicker({
format: 'M. d, yyyy',
inputs: $('#raul-date-range-picker-grouped').find('.datepicker-range-start, .datepicker-range-end')
});
All information about the datepicker JavaScript API can be found here .
The following datepicker shows the most basic usage by just adding the tag. A custom id is generated dynamically and does not persist on page refresh. The name attribute is also omitted.
<ui-datepicker></ui-datepicker>
<ui-datepicker inline></ui-datepicker>
<ui-datepicker date-range></ui-datepicker>
<ui-datepicker date-range date-range-group></ui-datepicker>
<ui-datepicker inline date-range></ui-datepicker>
The following is an example of all available options for this component.
<ui-datepicker
id="ui-datepicker-id"
input-id="lease-date"
input-name="lease-date[]"
title="Enter Start Of Lease Date"
orientation="auto"
placeholder="Choose Lease Date"
default-date="2/17/1993"
group
z-index="10"
max-date="12/24/2018"
min-date="2/3/1993"
></ui-datepicker>
| Attribute | Value Type | Default Value | Description |
|---|---|---|---|
input-id |
String |
internally generated | Sets the id attribute on the date input |
input-name |
String |
internally generated | Sets the name attribute on the date input |
title |
String |
None | Sets the label text |
placeholder |
String |
"Please Pick a Date" |
Sets the placeholder attribute on the date input |
default-date |
String |
None | Sets a date when passed a 'mm/dd/yyyy' format |
group |
Boolean |
This option is valueless | Adds form-group wrapper classes for forms |
orientation |
String |
"bottom left" |
Sets the position of the picker popup. All the other available values for orientation can be found here |
z-index |
Number |
100 |
Sets the CSS z-index |
max-date |
String |
None | The latest date that may be selected; all later dates will be disabled. |
min-date |
String |
None | The earliest date that may be selected; all earlier dates will be disabled. |
The API is attached directly to the custom element. You can use it by accessing the DOM
element and using the api property to call methods. The following is a quick
example of how to do this:
<ui-datepicker id="ui-datepicker-id"></ui-datepicker>
var datepicker = document.getElementById('ui-datepicker-id');
datepicker.api.date = '9-25-2018';
| Methods | Description |
|---|---|
api.date |
Gets the date. |
api.date = '5/5/2018' |
Sets the date. Strings must be parsable with format 'mm/dd/yyyy'. |
api.minDate |
Gets the min date. |
api.minDate = '5/5/2000' |
Sets the min date. Strings must be parsable with format 'mm/dd/yyyy'.
|
api.maxDate |
Gets the max date. |
api.maxDate = '5/5/2000' |
Sets the max date. Strings must be parsable with format 'mm/dd/yyyy'.
|
api.startDate |
Gets the start date. This only works for date range pickers. |
api.startDate = '5/5/2018' |
Sets the start date. Strings must be parsable with format 'mm/dd/yyyy'.
This only works for date range pickers.
|
api.endDate |
Gets the end date. This only works for date range pickers. |
api.endDate = '6/5/2018' |
Sets the end date. Strings must be parsable with format 'mm/dd/yyyy'.
This only works for date range pickers.
|