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.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

@(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; }