InputDateTime

The InputDateTime control unifies InputDate and InputTime into a single control, saving some screen real-estate in scenarios where you do want to edit the date and time parts of a Date object.

The InputDateTime control format property should be set to a format such as "g", which displays both date and time. It has two drop-down buttons, one for showing a calendar and one for a list of times.

The InputDateTime control extends the InputDate, so all properties and events are available as usual. It adds a group of properties to control the time-specific parameters of the control:

inputTime: Gets a reference to the inner InputTime control.
timeMin, timeMax, timeStep: Get or set the parameters used to populate the list of times shown in the time drop-down.
timeFormat: Gets or sets the format used to show time values in the InputTime drop-down.

The InputDate and InputTime controls can be used separately or together, to edit the date and time information in a Javascript Date object.

For example:

InputDateTime:

The current date/time is: Tuesday, April 8, 2025 5:30:00 PM.

// This file locates: "Scripts/Lesson/C1Input/InputDateTime.js".
c1.documentReady(function () {
    var theInputDateTime = wijmo.Control.getControl('#theInputDateTime');
    theInputDateTime.valueChanged.addHandler(function (s, e) {
        showDateTime(s.value);
    });
 
    // initialize the date/time value
    var dt = new Date();
    dt.setHours(17, 30, 0);
    theInputDateTime.value = dt;
 
    // show changes
    function showDateTime(value) {
        var el = document.getElementById('dateTime');
        el.textContent = wijmo.Globalize.format(value, 'F')
    }
});

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

<h1>
    @Html.Raw(Resources.C1Input.InputDateTime_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text3)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Input.InputDateTime_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputDateTime_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.InputDateTime_Text6)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text7)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text8)
</p>
<div class="demo-settings">
    <label for="theInputDateTime">@Html.Raw(Resources.C1Input.InputDateTime_Text9) </label>
    @Html.C1().InputDateTime().Id("theInputDateTime")
</div>
 
<p>
    @Html.Raw(Resources.C1Input.InputDateTime_Text10)
</p>