ASP.NET MVC Controls - InputDateRange - Overview- C1 ASP.NET MVC

InputDateRange

Overview

The InputDateRange control extends the InputDate control and configures it to allow editing date ranges.

Features

Overview

Sample SourceDocumentation

The current range is from 4/10/2025 to 4/13/2025.

Settings

Month Count

Weeks Before

Weeks After

Close On Selection

Description

This sample shows the basic usage of the InputDateRange control.

You may specify custom date ranges that the user can pick from, or they can use the multi-month calendar in the drop-down to select date ranges with the mouse or keyboard.

IndexController.cs Index.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
 
namespace MvcExplorer.Controllers
{
    public partial class InputDateRangeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.DemoSettings = true;
            return View();
        }
    }
}

@{
    var today = DateTime.Now.Date;
    var rangeEnd = today.AddDays(3);
}
 
@section Scripts{
    <script>
        // Get predefined date ranges
        function getPredefinedRanges() {
            let dt = wijmo.DateTime, now = new Date();
            return {
                // Custom
                'Custom Range': null,
                // Days
                //'Today': [now, now],
                //'Yesterday': [dt.addDays(now, -1), dt.addDays(now, -1)],
                //'Tomorrow': [dt.addDays(now, +1), dt.addDays(now, +1)],
                // Weeks
                'This Week': [dt.weekFirst(now), dt.weekLast(now)],
                'Last Week': [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))],
                'Next Week': [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))],
                // Months
                'This Month': [dt.monthFirst(now), dt.monthLast(now)],
                'Last Month': [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))],
                'Next Month': [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))],
                // Years
                'This Year': [dt.yearFirst(now), dt.yearLast(now)],
                'Last Year': [dt.addYears(dt.yearFirst(now), -1), dt.addYears(dt.yearLast(now), -1)],
                'Next Year': [dt.addYears(dt.yearFirst(now), +1), dt.addYears(dt.yearLast(now), +1)],
            };
        }
 
        function dateRangeChanged(s) {
            // Show date ranges
            let el = document.querySelector('#showRange');
            el.innerHTML = wijmo.format('@Html.Raw(Resources.InputDateRange.Index_ShowRange)', s);
        }
 
        function monthCountChanged(sender) {
            let inputDateRange = wijmo.Control.getControl("#demoControl");
            inputDateRange.monthCount = sender.value;
        }
 
        function weeksBeforeChanged(sender) {
            let inputDateRange = wijmo.Control.getControl("#demoControl");
            inputDateRange.weeksBefore = sender.value;
        }
 
        function weeksAfterChanged(sender) {
            let inputDateRange = wijmo.Control.getControl("#demoControl");
            inputDateRange.weeksAfter = sender.value;
        }
        function closeOnSelectionChanged(sender) {
            let inputDateRange = wijmo.Control.getControl("#demoControl");
            inputDateRange.closeOnSelection = sender.checked;
        }
    </script>
}
 
<style>
    .settings > div {
        margin-bottom: 0.5em;
    }
 
    .settings label {
        width: 10em;
        text-align: right;
        margin-right: 0.5em;
        float: left;
        font-weight: normal;
        line-height: 2em;
    }
 
    .settings input {
        height: 1.8em;
    }
 
    .settings .wj-inputnumber {
        width: 10em;
    }
 
    .wj-inputdate-dropdown > .wj-listbox {
        max-height: initial;
    }
</style>
 
<p>
    <div id="demoControl"></div>
</p>
 
<p>
    <span id="showRange"></span>
</p>
 
@(Html.C1().InputDateRange().Id("demoControl")
        .AlwaysShowCalendar(true)
        .CloseOnSelection(true)
        .MonthCount(2)
        .WeeksBefore(0)
        .WeeksAfter(0)
        .PredefinedRanges("getPredefinedRanges")
        .OnClientValueChanged("dateRangeChanged")
        .OnClientRangeEndChanged("dateRangeChanged")
        .Value(today)
        .RangeEnd(rangeEnd)
)
 
@section Settings{
 <div class="settings">
     <div>
         <label for="monthCount">Month Count</label>
         @(Html.C1().InputNumber().Id("monthCount").Min(1).Step(1).Value(2).OnClientValueChanged("monthCountChanged").Width(150))
     </div>
     <div>
         <label for="weeksBefore">Weeks Before</label>
         @(Html.C1().InputNumber().Id("weeksBefore").Min(0).Step(1).Value(0).OnClientValueChanged("weeksBeforeChanged").Width(150))
     </div>
     <div>
         <label for="weeksAfter">Weeks After</label>
         @(Html.C1().InputNumber().Id("weeksAfter").Min(0).Step(1).Value(0).OnClientValueChanged("weeksAfterChanged").Width(150))
     </div>
     <div>
         <label for="closeOnSelection">Close On Selection</label>
         <input type="checkbox" id="closeOnSelection" onchange="closeOnSelectionChanged(this)" checked />
     </div>
</div>
}
 
@section Summary{
    <p>@Html.Raw(Resources.InputDateRange.Index_Text0)</p>
}
 
@section Description{
    <p>@Html.Raw(Resources.InputDateRange.Index_Text1)</p>
    <p>@Html.Raw(Resources.InputDateRange.Index_Text2)</p>
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

InputDateRange

Overview

Features

Settings

Description