More InputDate Customization

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.

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.

// This file locates: "Scripts/Lesson/C1Input/InputDateMoreCustomization.js".
c1.documentReady(function () {
    /*
    var theInputDate = wijmo.Control.getControl('#theInputDate');
    // replace down-arrow icon with calendar
    // (would affect only one instance of the control)
    var btn = theInputDate.hostElement.querySelector('button');
    btn.innerHTML = '<span class="wj-glyph-calendar"></span>';
 
    // change the format used to show current month/year
    // (would affect only one instance of the control)
    theInputDate.calendar.formatItem.addHandler(function (s, e) {
        var month = s.hostElement.querySelector('[wj-part=span-month]');
        month.innerHTML = wijmo.Globalize.format(s.displayMonth, 'MMMM yyyy');
    });
    */
});

// This file locates: "Content/css/Lesson/C1Input/InputDateMoreCustomization.css".
.wj-calendar {
  max-width: 21em;
}
 
.wj-calendar .wj-header {
  color: white;
  background: #808080;
}
 
.wj-calendar .date-holiday:not(.wj-state-selected) {
  font-weight: bold;
  color: #008f22;
  background: #f0fff0;
  outline: 2pt solid #008f22;
}
 
.wj-calendar .date-weekend:not(.wj-state-selected) {
  background-color: #d8ffa6;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputDateMoreCustomization
        public ActionResult InputDateMoreCustomization()
        {
            return View();
        }
    }
}

<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>
}