Lava Shortcode - Date Picker

Description

Provide an interactive calendar for selecting a single date.

Documentation

This control displays a date input.

Example Usage

{[ datepicker label:'My Date' name:'date' isrequired:'true' value:'{{ 'Now' | Date:'M/d/yyyy' }}' ]}

Parameter List

This control supports the following parameters:

• label (Date) - The label to display above the control.
• showlabel (true) - Whether to display a label.
• name (date) - The name for the date picker control.
• value - The date to initially set the control to.
• isrequired (false) - Establishes whether making a selection is necessary.
• validationmessage (Please provide a date.) - Message to display when the value is not valid.
• additionalattributes - Additional attributes to include on the input control.

Markup

{% capture id %}rc-{{ '' | UniqueIdentifier }}{% endcapture %}

{[ rockcontrol id:'{{ id }}' label:'{{ label }}' showlabel:'{{ showlabel }}' controltype:'date-picker' isrequired:'{{ isrequired }}' validationmessage:'{{ validationmessage }}' ]}

    {% assign isrequired = isrequired | AsBoolean %}
    {% assign showlabel = showlabel | AsBoolean %}

    <div class="input-group input-width-md js-date-picker date">
        <input name="{{ name }}" type="text" id="{{ id }}" class="form-control" value="{{ value }}" {% if isrequired == true %}required{% endif %} {{ additionalattributes }}> <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>


    <script>
        Rock.controls.datePicker.initialize(
            {
                id: '{{ id }}',
                startView: 0,
                showOnFocus: true,
                format: 'mm/dd/yyyy',
                todayHighlight: true,
                forceParse: true,
                postbackScript: '',
            });
    </script>

{[ endrockcontrol ]}