{{!--<div class="site-example--content slds-m-bottom--xx-large slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
{{#aljs-pre-container type="html"}}
<div class="slds-form--stacked slds-float--left">
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="date">Multi Select Date Picker Label</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
            <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                <use xlink:href="assets/icons/utility-sprite/svg/symbols.svg#event"></use>
            </svg>
            <input id="start-date" class="slds-input" type="text" placeholder="Pick a Start Date" label="Date Picker Label" />
        </div>
    </div>
    <div class="slds-form-element">
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
            <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                <use xlink:href="assets/icons/utility-sprite/svg/symbols.svg#event"></use>
            </svg>
            <input id="end-date" class="slds-input" type="text" placeholder="Pick a End Date" label="Date Picker Label" />
        </div>
    </div>
</div>
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('#start-date').datepicker({
        endDateInputId: 'end-date'
    });
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('#date').datepicker({
        numYearsBefore: 50,
        numYearsAfter: 10,
        format: 'MM/DD/YYYY',
        initDate: moment(),
        endDate: moment().add(3, 'days'),
        dayLabels: [
            {
                full: 'Sunday',
                abbr: 'S'
            },
            {
                full: 'Monday',
                abbr: 'M'
            },
            {
                full: 'Tuesday',
                abbr: 'T'
            },
            {
                full: 'Wednesday',
                abbr: 'W'
            },
            {
                full: 'Thursday',
                abbr: 'T'
            },
            {
                full: 'Friday',
                abbr: 'F'
            },
            {
                full: 'Saturday',
                abbr: 'S'
            }
        ],
        monthLabels: [
            {
                full: 'January',
                abbr: ''
            },
            {
                full: 'February',
                abbr: ''
            },
            {
                full: 'March',
                abbr: ''
            },
            {
                full: 'April',
                abbr: ''
            },
            {
                full: 'May',
                abbr: ''
            },
            {
                full: 'June',
                abbr: ''
            },
            {
                full: 'July',
                abbr: ''
            },
            {
                full: 'August',
                abbr: ''
            },
            {
                full: 'September',
                abbr: ''
            },
            {
                full: 'October',
                abbr: ''
            },
            {
                full: 'November',
                abbr: ''
            },
            {
                full: 'December',
                abbr: ''
            }
        ]
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details additional options available for the jQuery function when using a multi-select datepicker.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Default value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>endDateInputId</code></th>
                        <td data-label="Behavior">Specifies the id of the input for the multi-select datepicker's end date</td>
                        <td data-label="Accepted values">Any input id</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>endDate</code></th>
                        <td data-label="Behavior">Sets the multi-select datepicker's end date to a specified date</td>
                        <td data-label="Accepted values">A moment.js object</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>null</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Methods</h4>
{{#aljs-pre-container type="js"}}
var endDate = $('#start-date').datepicker('getEndDate');
$('#start-date').datepicker('setEndDate', moment());
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the methods available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Method</th>
                        <th scope="col">jQuery object</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>getEndDate</code></th>
                        <td data-label="jQuery object">The datepicker's start date input node</td>
                        <td data-label="Outcome">A moment.js object representing the selected end date is returned</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>setEndDate</code></th>
                        <td data-label="jQuery object">The datepicker's start date input node</td>
                        <td data-label="Outcome">The datepicker's end date is set to the date of the passed in moment.js object</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}