InputDate

The InputDate control allows users to enter and edit dates. It has the following advantages over regular input elements:

Users cannot enter non-numeric values at all.
You can use the format property to format the number as it is edited, making it easy to read.
You can use the min and max properties to specify the valid range of values (users will not be able to enter values outside this range).
You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the control.

For example, here is an InputDate with default settings:

InputDate

The current date is .

By default, InputDate values are required, so you can't delete the entire content of the control. If you want to enter dates that are optional, set the isRequired property to false:

Not Required

// This file locates: "Scripts/Lesson/C1Input/InputDate.js".
c1.documentReady(function () {
    // a regular input date
    var theDate = wijmo.Control.getControl('#theDate');
    showCurrentDate();
    theDate.valueChanged.addHandler(function (s, e) {
        showCurrentDate();
    });

    // you can clear this one
    var theDateNotRequired = wijmo.Control.getControl('#theDateNotRequired');
    theDateNotRequired.isRequired = false;
    theDateNotRequired.value = null;

    // show the currently selected date
    function showCurrentDate() {
        var el = document.getElementById('theDateOutput');
        el.textContent = wijmo.Globalize.format(theDate.value, 'D');
    }
});

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputDate
        public ActionResult InputDate()
        {
            return View();
        }
    }
}

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

<p>
    @Html.Raw(Resources.C1Input.InputDate_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Input.InputDate_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputDate_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputDate_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputDate_Text5)
    </li>
</ol>

<p>
    @Html.Raw(Resources.C1Input.InputDate_Text6)
</p>
<div class="demo-settings">
    <label for="theDate">@Html.Raw(Resources.C1Input.InputDate_Text7)</label>
    @Html.C1().InputDate().Id("theDate")
</div>
<div>
    @Html.Raw(Resources.C1Input.InputDate_Text8)
</div>

<p></p>
<p>
    @Html.Raw(Resources.C1Input.InputDate_Text9)
</p>
<div class="demo-settings">
    <label for="theDateNotRequired">@Html.Raw(Resources.C1Input.InputDate_Text10)</label>
    @Html.C1().InputDate().Id("theDateNotRequired").Placeholder(Resources.C1Input.InputDate_Text11)
</div>