Lava Shortcode - Date Range Picker

Description

Let users select a start and end date using a single control.

Documentation

This control displays a two input the Start Date and End Date.

Example Usage

{[ daterangepicker label:'Date Range' 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 the label.
• value - The date to initially set the control to.
• isrequired (false) - Establishes whether making a selection is necessary.
• validationmessage (Please provide a valid Date.) - Message to display when the value is not valid.

Markup

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

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

    {% assign isrequired = isrequired | AsBoolean %}
    
    <div id="{{ id }}" data-required="false" data-itemlabel="Default Value" class="js-daterangepicker picker-daterange">
      <div class="form-control-group">
      
            <div id="{{ id | Append:'_lower'}}" class="input-group input-group-lower js-lower input-width-md js-date-picker date">
                <input name="{{ name | Append:'_lower'}}" type="text" class="form-control" value="{{ value }}" {% if isrequired == true %}required{% endif %}>
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            
            <span name="{{ id }}" class="validation-error help-inline" style="display:none;"></span>
            <div class="input-group form-control-static"> to </div>
            
            <div id= "{{id | Append:'_upper' }}" class="input-group input-group-upper js-upper input-width-md js-date-picker date">
                <input name="{{ name | Append:'_upper'}}" type="text" class="form-control" value="{{ value }}">
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
            
            <span name="{{ id }}" class="validation-error help-inline" style="display:none;"></span>
            
        </div>
      <span name="{{ id }}" class="validation-error help-inline" style="display:none;">Default Value is required.</span>
    </div>

    <script>

        
             Rock.controls.datePicker.initialize(
                {
                    id: "{{ id | Append:'_lower'}}",
                });
                Rock.controls.datePicker.initialize(
                {
                    id: "{{ id | Append:'_upper'}}",
                });

    </script>

{[ endrockcontrol ]}