New to Telerik UI for ASP.NET Core? Download free 30-day trial

Razor Page

This article demonstrates how to set up the DateRangePicker component in a Razor Pages scenario and how to add a default value.

See the implementation details in the example below. For the full project with Razor Pages examples, visit our GitHub repository.

@model Telerik.Examples.RazorPages.Pages.DateRangePicker.DateRangePickerDefaultValueModel
    ViewData["Title"] = "DateRangePickerDefaultValue";

    <h4>Select a date range</h4>
        .Range(r => r.Start(DateTime.Now).End(DateTime.Now.AddDays(10))) // Add a default value using the Range method.
        .HtmlAttributes(new { style = "width: 100%", title = "daterangepicker" })

    div {
        text-align: center;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Telerik.Examples.RazorPages.Pages.DateRangePicker
    public class DateRangePickerDefaultValueModel : PageModel
        public void OnGet()
In this article