Input Dates and Times

Javascript Date objects contain date and time information.

Because in many cases only the date or time are relevant to the application, Wijmo offers separate controls for editing dates, times, or both.

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

InputDate:
InputTime:

If you prefer to edit the date and time parts of a Date object using a single control, use the InputDateTime:

InputDateTime:

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

// This file locates: "Scripts/Lesson/C1Input/DatesTimes.js".
c1.documentReady(function () {
    // we can edit date without changing time
    var theInputDateOnly = wijmo.Control.getControl('#theInputDateOnly');
    theInputDateOnly.valueChanged.addHandler(function (s, e) {
        setDateTime(s.value);
    });
 
    // we can edit time without changing date
    var theInputTimeOnly = wijmo.Control.getControl('#theInputTimeOnly');
    theInputTimeOnly.valueChanged.addHandler(function (s, e) {
        setDateTime(s.value);
    });
 
    // or edit the whole thing
    var theInputDateTime = wijmo.Control.getControl('#theInputDateTime');
    theInputDateTime.valueChanged.addHandler(function (s, e) {
        setDateTime(s.value);
    });
 
    // initialize and update the date/time value
    var dt = new Date();
    dt.setHours(17,30);
    setDateTime(dt);
    function setDateTime(value) {
        var el = document.getElementById('dateTime');
        el.textContent = wijmo.Globalize.format(value, 'F')
        theInputDateOnly.value = value;
        theInputTimeOnly.value = value;
        theInputDateTime.value = value;
    }
});

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

<h1>
    @Html.Raw(Resources.C1Input.DatesTimes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.DatesTimes_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.DatesTimes_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.DatesTimes_Text3)
</p>
<div class="demo-settings">
    <label for="theInputDateOnly">@Html.Raw(Resources.C1Input.DatesTimes_Text4) </label>
    @Html.C1().InputDate().Id("theInputDateOnly")
    <br>
    <label for="theInputTimeOnly">@Html.Raw(Resources.C1Input.DatesTimes_Text5) </label>
    @Html.C1().InputTime().Id("theInputTimeOnly")
</div>
<p>
    @Html.Raw(Resources.C1Input.DatesTimes_Text6)
</p>
<div class="demo-settings">
    <label for="theInputDateTime">@Html.Raw(Resources.C1Input.DatesTimes_Text7) </label>
    @Html.C1().InputDateTime().Id("theInputDateTime")
</div>
<p>
    @Html.Raw(Resources.C1Input.DatesTimes_Text8)
</p>