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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Client-side date auto-complete

Thread ID:

Created:

Updated:

Platform:

Replies:

142122 Jan 21,2019 11:02 AM UTC Jan 23,2019 04:18 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DatePicker
Jonathan Dodd
Asked On January 21, 2019 11:02 AM UTC

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


Deepa Loganathan [Syncfusion]
Replied On 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. 


Jonathan Dodd
Replied On 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

Deepa Loganathan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;