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 and is included in raul.js. 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',
autoclose: true
});
<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',
autoclose: true,
inputs: $('#raul-date-range-picker').find('.datepicker-range-start, .datepicker-range-end'),
keepEmptyValues: true
}).on('changeDate', function() {
var startDateInput = $(this).find('.datepicker-range-start')
var endDateInput = $(this).find('.datepicker-range-end')
if (startDateInput.val() &&
endDateInput.val()
) return
if (startDateInput.val()) {
endDateInput.focus()
} else {
startDateInput.focus()
}
});
<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',
autoclose: true,
inputs: $('#raul-date-range-picker-grouped').find('.datepicker-range-start, .datepicker-range-end'),
keepEmptyValues: true
}).on('changeDate', function() {
var startDateInput = $(this).find('.datepicker-range-start')
var endDateInput = $(this).find('.datepicker-range-end')
if (startDateInput.val() &&
endDateInput.val()
) return
if (startDateInput.val()) {
endDateInput.focus()
} else {
startDateInput.focus()
}
});
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"
autoclose="false"
></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. |
autoclose |
Boolean |
true |
Whether or not to close the datepicker immediately when a date is selected. |
autofocus |
Boolean |
true |
Whether or not to focus the start/end date input after selecting one of them. This is only available for date range pickers. |
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.
|