カスタム範囲

DateRangePicker lets you to define date ranges based on your requirements. Using the DateRangePicker control, you can define various date ranges, such as current week, last week, next month, this year range, custom ranges, etc., in your applications for users to choose from. In the following example, we set three custom ranges, last week, this week and next week. Similarly, you can define more date ranges according to your requirements.

custom ranges set for the DateRangePicker control

The following code snippets showcases how you can define different custom ranges.

Index.razor	コードのコピー
<C1DateRangePicker Value="_c1DateRangePickerSettings.DateRange"></C1DateRangePicker> <br /> <br /> <h5>Settings</h5> <C1HtmlButton Click="PointToLastWeek"> <span class="button-content">Last week</span> </C1HtmlButton> <C1HtmlButton Click="PointToThisWeek"> <span class="button-content">This week</span> </C1HtmlButton> <C1HtmlButton Click="PointToNextWeek"> <span class="button-content">Next week</span> </C1HtmlButton> <br /> <br /> @code { class C1DateRangePickerSettings { public DateRange DateRange { get; set; } public C1DateRangePickerSettings() { DateRange = new DateRange(); } } readonly C1DateRangePickerSettings _c1DateRangePickerSettings = new C1DateRangePickerSettings(); private void PointToLastWeek(MouseEventArgs obj) { var date = DateTime.Today; DateTime mondayOfLastWeek = date.AddDays(-(int)date.DayOfWeek - 6); _c1DateRangePickerSettings.DateRange.Start = mondayOfLastWeek; _c1DateRangePickerSettings.DateRange.End = mondayOfLastWeek.AddDays(6); } private void PointToThisWeek(MouseEventArgs obj) { var date = DateTime.Today; DateTime mondayOfThisWeek = date.AddDays(-(int)date.DayOfWeek + 1); _c1DateRangePickerSettings.DateRange.Start = mondayOfThisWeek; _c1DateRangePickerSettings.DateRange.End = mondayOfThisWeek.AddDays(6); } private void PointToNextWeek(MouseEventArgs obj) { var date = DateTime.Today; DateTime mondayOfNextWeek = date.AddDays(-(int)date.DayOfWeek + 8); _c1DateRangePickerSettings.DateRange.Start = mondayOfNextWeek; _c1DateRangePickerSettings.DateRange.End = mondayOfNextWeek.AddDays(6); } }

Index.razor

コードのコピー

<C1DateRangePicker Value="_c1DateRangePickerSettings.DateRange"></C1DateRangePicker>
    <br />
    <br />
    <h5>Settings</h5>

    <C1HtmlButton Click="PointToLastWeek">
        <span class="button-content">Last week</span>
    </C1HtmlButton>

    <C1HtmlButton Click="PointToThisWeek">
        <span class="button-content">This week</span>

    </C1HtmlButton>

    <C1HtmlButton Click="PointToNextWeek">
        <span class="button-content">Next week</span>
    </C1HtmlButton>

    <br />
    <br />

    @code {


        class C1DateRangePickerSettings
        {
            public DateRange DateRange { get; set; }

            public C1DateRangePickerSettings()
            {
                DateRange = new DateRange();
            }
        }

        readonly C1DateRangePickerSettings _c1DateRangePickerSettings = new C1DateRangePickerSettings();

        private void PointToLastWeek(MouseEventArgs obj)
        {

            var date = DateTime.Today;

            DateTime mondayOfLastWeek = date.AddDays(-(int)date.DayOfWeek - 6);

            _c1DateRangePickerSettings.DateRange.Start = mondayOfLastWeek;
            _c1DateRangePickerSettings.DateRange.End = mondayOfLastWeek.AddDays(6);


        }

        private void PointToThisWeek(MouseEventArgs obj)
        {

            var date = DateTime.Today;

            DateTime mondayOfThisWeek = date.AddDays(-(int)date.DayOfWeek + 1);

            _c1DateRangePickerSettings.DateRange.Start = mondayOfThisWeek;
            _c1DateRangePickerSettings.DateRange.End = mondayOfThisWeek.AddDays(6);


        }

        private void PointToNextWeek(MouseEventArgs obj)
        {

            var date = DateTime.Today;

            DateTime mondayOfNextWeek = date.AddDays(-(int)date.DayOfWeek + 8);

            _c1DateRangePickerSettings.DateRange.Start = mondayOfNextWeek;
            _c1DateRangePickerSettings.DateRange.End = mondayOfNextWeek.AddDays(6);

        }
    }