<h1>
    More InputDate Customization
</h1>

<p>
    You can customize the icon shown in the drop-down button
    by changing the InputDate's controlTemplate property,
    or by using code to change the control content. The
    first option would affect all InputDate controls in the
    application; the second would affect only a single
    control.
</p>
<p>
    You can also customize the format used to display the
    current month/year in the drop-down Calendar by changing
    the Globalization's standard 'y' format, or by using
    code to change the control content. Again, the first
    option would affect all InputDate and Calendar controls
    in the application; the second would affect only a single
    control.
</p>
@Html.C1().InputDate().Id("theInputDate")

@section Scripts{
    <script>
        // change InpuDate icon to a calendar instead of a down arrow
        // (applies to all InputDate controls)
        wijmo.input.InputDate.controlTemplate = '<div style="position:relative" class="wj-template">' +
        '<div class="wj-input">' +
            '<div class="wj-input-group wj-input-btn-visible">' +
            '<input wj-part="input" type="text" class="wj-form-control" />' +
            '<span wj-part="btn" class="wj-input-group-btn" tabindex="-1">' +
                '<button class="wj-btn wj-btn-default" type="button" tabindex="-1">' +
                '<span class="wj-glyph-calendar"></span>' +
                        '</button>' +
                    '</span>' +
                '</div>' +
            '</div>' +
        '<div wj-part="dropdown" class="wj-content wj-dropdown-panel" ' +
            'style="display:none;position:absolute;z-index:100">' +
        '</div>' +
        '</div>';

        // change the format used to show current month/year
        // (affects all InputDate and Calendar controls)
        wijmo.culture.Globalize.calendar.patterns['y'] = 'MMMM yyyy';
    </script>
}