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
close icon

Client-side date auto-complete

Hello,

I have a range of auto-generated DatePicker controls displayed in a vertical sequence.  I have a use case whereby the first of these dates is set by a user and then the remaining dates need to be auto-populated with each date increasing by a week.  I can assign the dates by updating the value of the underlying input form control, but this causes the date not to be set in the popup calendar and causes the control to show the invalid (red) border.  Is it possible to assign dates to DatePicker controls client-side, when using the ASP.Net Core component?

Thanks for you help,

Jon


3 Replies

DL Deepa Loganathan Syncfusion Team January 22, 2019 10:04 AM UTC

Hi Jonathan, 

Thanks for contacting Syncfusion support. 

We have investigated the reported query on EJ2 DatePicker component. 

Query 1: Date validation error while updating the Datepicker  
 
Solution: 
 
Based on the details provided, we suspect that the root cause of the issue was because of difference in dateformat. By default, Date object will be processed and validated based on the default culture of the application (en-US – MM/dd/yyyy).   
 
So, if you have had rendered the Datepicker with different format (dd/MM/yyyy), the date validation wil fail.  
 
To overcome this, you need to update the culture of your application in the Start.up cs file as given in the below code. 
 
[Startup.cs] 
public Startup(IConfiguration configuration) 
        { 
            Configuration = configuration; 
            CultureInfo newCulture = (CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone(); 
            newCulture.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy"; 
            newCulture.DateTimeFormat.DateSeparator = "/"; 
            Thread.CurrentThread.CurrentCulture = newCulture; 
        } 
 
 
Query 2: Update date values in of Datepicker client-side based on the value of another Datepicker 
 
Solution: 
 
We have prepared a solution to achieve your expected requirement in the client-side, by using the DOMContentLoaded and Change event of the DatePicker control. Please, refer the below code sample of our solution. 
 
[index.cshtml] 
@model CoreEJ2.Controllers.HomeController.DateValue 
<form method="post"> 
    <h5> ** While changing the value in first DatePicker, increasing value of next weeks (7 days) will be set as other DatePicker's value **</h5> 
    <div> 
        <ejs-datepicker id="datepicker1" width="275px" cssClass="spacing" change="valueChange" value="Model.Value"></ejs-datepicker> 
    </div> 
    <div> 
        <ejs-datepicker id="datepicker2" width="275px" cssClass="spacing"></ejs-datepicker> 
    </div> 
    <div> 
        <ejs-datepicker id="datepicker3" width="275px" cssClass="spacing"></ejs-datepicker> 
    </div> 
    <div> 
        <ejs-datepicker id="datepicker4" width="275px" cssClass="spacing"></ejs-datepicker> 
    </div> 
    <div> 
        <ejs-datepicker id="datepicker5" width="275px" cssClass="spacing"></ejs-datepicker> 
    </div> 
</form> 
 
<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        // Once the document is loaded, we will dynamically update the value of the other DatePicker's value based on the first DatePicker's value. 
        valueChange(); 
    }, false); 
    function valueChange(args) { 
        //Change event of first DatePicker to dynamically update the value of the other DatePicker's value based on the first DatePicker's value. 
        if (args == null) { 
            valueObject = document.getElementsByClassName('e-datepicker')[0].ej2_instances[0].value; 
        } else { 
            valueObject = args.value; 
        } 
        if (valueObject != null) { 
            var value = []; 
            for (var i = 0; i < document.getElementsByClassName('e-datepicker').length; i++) { 
                if (value.length == 0) { 
                    value.push(valueObject) 
                } else { 
                    value.push(new Date(new Date(value[i - 1]).setDate(value[i - 1].getDate() + 7))); 
                    document.getElementsByClassName('e-datepicker')[i].ej2_instances[0].value = value[i]; 
                } 
            } 
        } 
    } 
</script> 
 
<style> 
    .spacing { 
        margin: 10px 0; 
    } 
    h5 { 
    color:forestgreen; 
    } 
</style> 
 
 
 
Also, download the sample with the above code prepared with latest EJ version from the following link. 
 

If still the problem exists at your end, then please get to us with more details like given below. 
  • Code sample to reproduce the issue.
  • Script error code and screenshot.
  • Issue reproducing video sample.
  • Sample by reproducing the reported issue (if possible).

This information would help us to isolate the root cause of the issue and update you the prompt solution at the earliest. 

Regards, 
Deepa L. 



JD Jonathan Dodd January 22, 2019 07:07 PM UTC

Hi Deepa,

Thank you very much for your response in both cases.  I now have it working as desired.

Regards,

Jon


DL Deepa Loganathan Syncfusion Team January 23, 2019 04:18 AM UTC

Hi Jon,  
 
Most welcome. Please get back to us if you have any further queries.  
 
Regards,  
Deepa L. 


Loader.
Live Chat Icon For mobile
Up arrow icon