InputTime

The InputTime control extends the ComboBox class to allow easy entry and editing of time values.

The main properties in the InputTime control are:

value: Gets or sets the currently selected time.
min, max, step: Determine the times shown in the control's drop-down list.
format: Gets or sets the format string used to display and parse time values.
isEditable: Determines whether users should be allowed to enter time values not shown on the drop-down list.

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

InputDate:
InputTime:

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

// This file locates: "Scripts/Lesson/C1Input/InputTime.js".
c1.documentReady(function () {
    var theInputDate = wijmo.Control.getControl('#theInputDate');
    theInputDate.valueChanged.addHandler(function (s, e) {
        setDateTime(s.value);
    });
 
    var theInputTime = wijmo.Control.getControl('#theInputTime');
    theInputTime.min = '9:00'; // list starts at 9am
    theInputTime.max = '17:00'; // until 5pm
    theInputTime.step = 30; // every 30 minutes
    theInputTime.format = 'h:mm tt'; // default format, with AM/PM
    theInputTime.isEditable = true; // user can enter values not on the list
    theInputTime.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')
        theInputDate.value = value;
        theInputTime.value = value;
    }
});

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

<h1>
    @Html.Raw(Resources.C1Input.InputTime_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputTime_Text1)
</p>
<p>
    The main properties in the InputTime control are:
    <ul>
        <li>
            @Html.Raw(Resources.C1Input.InputTime_Text2)
        </li>
        <li>
            @Html.Raw(Resources.C1Input.InputTime_Text3)
        </li>
        <li>
            @Html.Raw(Resources.C1Input.InputTime_Text4)
        </li>
        <li>
            @Html.Raw(Resources.C1Input.InputTime_Text5)
        </li>
    </ul>
<p>
    @Html.Raw(Resources.C1Input.InputTime_Text6)
</p>
<div class="demo-settings">
    <label for="theInputDate">@Html.Raw(Resources.C1Input.InputTime_Text7) </label>
    @Html.C1().InputDate().Id("theInputDate")
    <br>
    <label for="theInputTime">@Html.Raw(Resources.C1Input.InputTime_Text8) </label>
    @Html.C1().InputTime().Id("theInputTime")
</div>
<p>
    @Html.Raw(Resources.C1Input.InputTime_Text9)
</p>