The problem is that when you click the buttons, the RadDateRangePicker is filled with the start of 2025-06-01 and the end of 2025-06-30. Then, when you click the button again, a change should occur in the RadDateRangePicker: start of 2025-07-01 and end of 2025-07-31.
1 step => correct
2 step => incorrect
Result
The first time you click the button, it returns the start date to 06/01/2025 and the end date to 06/30/2025 (this is correct). Clicking it again returns the start date to 06/30/2025 and the end date to 07/31/2025 (this is incorrect).
Work around
- Local page
js code fixed
const datepicker = $find('<%= radDateRangePicker2.ClientID %>');
datepicker.set_rangeSelectionStartDate(null);
datepicker.set_rangeSelectionEndDate(null);
- Global fixed All controls
C# in extension control
public bool EnableDateResetting
{
get => ViewState["EnableDateResetting"] as bool? ?? false;
set => ViewState["EnableDateResetting"] = value;
}
public eDateRangePicker() : base()
{
Load += EDateRangePicker_Load;
}
private void EDateRangePicker_Load(object sender, EventArgs e)
{
if (EnableDateResetting)
{
RegisterDateResettingScript();
}
}
private void RegisterDateResettingScript()
{
string script = $@"
Sys.Application.add_load(function() {{
const picker = $find('{ClientID}');
if (picker) {{
const origStart = picker.set_rangeSelectionStartDate;
const origEnd = picker.set_rangeSelectionEndDate;
picker.set_rangeSelectionStartDate = function(date) {{
if (date !== null && !this._isResetting) {{
const currentStart = this.get_rangeSelectionStartDate();
const currentEnd = this.get_rangeSelectionEndDate();
if (currentStart || currentEnd) {{
this._isResetting = true;
origStart.call(this, null);
origEnd.call(this, null);
this._isResetting = false;
}}
}}
return origStart.call(this, date);
}};
picker.set_rangeSelectionEndDate = function(date) {{
return origEnd.call(this, date);
}};
}}
}});
";
ScriptManager.RegisterStartupScript(this, GetType(), $"DateResetting_{ClientID}", script, true);
}