<h1>
    @Html.Raw(Resources.C1Input.InputDateMoreCustomization_Title)
</h1>

<p>
    @Html.Raw(Resources.C1Input.InputDateMoreCustomization_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateMoreCustomization_Text2)
</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>
}