ComboBox with Numbers and Dates

You can use ComboBoxes to select from lists of numbers:

Select a number:

You have selected this value: 2.

You can use ComboBoxes to select from lists of dates. In this case, we use the formatItem event to format the date objects using C1 MVC's Globalize class:

Select a date:

You have selected this date: 1/1/2017.

// This file locates: "Scripts/Lesson/C1Input/ComboBoxNumbersDates.js".
c1.documentReady(function () {
    var theComboNumber = wijmo.Control.getControl('#theComboNumber');
    var theComboDate = wijmo.Control.getControl('#theComboDate');
 
    // select a number
    theComboNumber.selectedIndexChanged.addHandler(function (s, e) {
        setText('theComboNumberValue', s.selectedValue);
    });
    theComboNumber.itemsSource = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71];
 
    // select a date
    theComboDate.selectedIndexChanged.addHandler(function (s, e) {
        setText('theComboDateValue', s.text);
    });
    theComboDate.formatItem.addHandler(function (s, e) {
        e.item.textContent = wijmo.Globalize.format(e.data, 'd')
    });
    theComboDate.itemsSource = [new Date(2017, 0, 1), new Date(2017, 1, 12), new Date(2017, 1, 22), new Date(2017, 4, 13), new Date(2017, 4, 24), new Date(2017, 8, 19)];
 
    // show text in an element on the page
    function setText(id, value) {
        document.getElementById(id).textContent = value;
    }
});

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

<h1>
    @Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text1)
</p>
<label for="theComboNumber">@Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text2)</label>
@Html.C1().ComboBox().Id("theComboNumber")
<p>
    @Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text3)
</p>
 
<p>
    @Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text4)
</p>
<label for="theComboDate">@Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text5)</label>
@Html.C1().ComboBox().Id("theComboDate")
<p>
    @Html.Raw(Resources.C1Input.ComboBoxNumbersDates_Text6)
</p>