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

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.

Thank you for the feedback!

Backend API

@(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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult DateTimeScaleLightweight() { return View(); } } }

#range-selector { height: 250px; }