Free Trial Buy
    Your search did not match any results.
    RangeSelector

    Date-Time Scale (Lightweight)

    Light
    Light Dark Contrast Carmine Dark Moon Soft Blue Dark Violet Green Mist Blue Light Lime Light Orange Light Purple Light Teal Light
    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(i => i.Days(7)) .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%; }