We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Razor Components Calendar

Hi, Im trying to access the value of the selected date on the calendar object, I tried it this way:
<EjsDatePicker Id="test" Change="@ValueChanged"  Start="@Syncfusion.EJ2.RazorComponents.Calendars.CalendarView.Decade" 
                   Depth="@Syncfusion.EJ2.RazorComponents.Calendars.CalendarView.Decade" Format="yyyy">

@functions{
    public object selectedDate;
    protected void ValueChanged(Syncfusion.EJ2.RazorComponents.Calendars.ChangedEventArgs newValue)
    {
        selectedDate = newValue.Value;
    }
But the value is not located in the arguments passed to ValueChanged method....
Best regards!

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team April 29, 2019 08:48 AM UTC

Hi Raul, 
 
Sorry for the inconvenience. 
 
Currently we were not providing the option to access the value of the selected date on the calendar Object. Already we have the considered this option with Two-way binding support in calendar components. So, we have planned this feature on Vol 1 service pack release which expected to be rolled out on mid of May 2019. You can track the status of this feature on below feedback portal link. 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 



RA Raul April 29, 2019 06:49 PM UTC

So, currently I cant access the value in any way?


AB Ashokkumar Balasubramanian Syncfusion Team April 30, 2019 10:17 AM UTC

Hi Raul, 
 
Yes. You can able access the calendar component values by using component instance. Please check the below code block. 
 
index.cshtml] 
 
@page "/" 
 
@inject IJSRuntime JsRuntime; 
@using Syncfusion.EJ2.RazorComponents.Calendars; 
<div id="wrapper"> 
   <EjsDatePicker Id="test" Change="@Change" Start="@Syncfusion.EJ2.RazorComponents.Calendars.CalendarView.Decade"                   Depth="@Syncfusion.EJ2.RazorComponents.Calendars.CalendarView.Decade" Format="yyyy"> 
</div> 
@functions{ 
 
EjsDatePicker dueDatePicker; 
protected async void Change (object args) 
    { 
    await JsRuntime.InvokeAsync<bool> 
    ("change");  
    } 
    } 
 
[wwwrrot/scripts/datepicker/datepicker.js] 
 
function change(args) { 
    var date = document.getElementById("test ").ej2_instances[0]; 
    var value = date.value; 
    alert(value); 
} 
 
[wwwrrot/scripts/index.cshtml] 
 
<body> 
    <app>Loading...</app> 
 
    <script src="_framework/components.webassembly.js"></script> 
    <script src="scripts/datepicker/datepicker.js"></script> 
</body> 
</html> 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon