Date-Time Scale (Lightweight)

Documentation

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.

Prev Demo Next Demo

jQuery

AngularJS

Angular

ASP.NET MVC

ASP.NET Core

@(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(50)) .Size(s => s.Height(250)) .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: 440px; width: 100%; }