Range Selector ▸ Date-Time Scale (Lightweight)

This demo illustrates a date-time scale. Here, minimum and maximum ranges are set, so that a user cannot select a vacation period less than a week and more than a month. To select a particular month, click between the corresponding scale markers.

@(Html.DevExtreme().RangeSelector()
    .ID("range-selector")
    .Margin(m => m.Top(50))
    .Scale(s => s
        .StartValue(new DateTime(2011, 2, 1))
        .EndValue(new DateTime(2011, 7, 1))
        .MinorTickInterval(VizTimeInterval.Day)
        .TickInterval(VizTimeInterval.Week)
        .MinRange(VizTimeInterval.Week)
        .MaxRange(VizTimeInterval.Month)
        .MinorTick(m => m.Visible(false))
    )
    .SliderMarker(f => f.Format(Format.MonthAndDay))
    .Value(new[] { new DateTime(2011, 2, 5), new DateTime(2011, 3, 5)})
    .Title("Select a Vacation Period")
)

using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Linq;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class RangeSelectorController : Controller {

        public ActionResult DateTimeScaleLightweight() {
            return View();
        }

    }
}

#range-selector {
    height: 250px;
}