1. Home
  2. Forum
  3. Angular - EJ 2
  4. Daterangepicker manual editing throwing error

Daterangepicker manual editing throwing error

HI,

I have used ejs-daterange picker for my angular app. I am having one issue with inserting date manually through input field.



What i wanted to achieve?

=> if user input just one date than take that date as a start and end date.

=> how can I resolve the console error while inserting date

Here is the version I am using : 

"@syncfusion/ej2-angular-calendars": "18.1.57",

 

please let me know your suggestion.


Regards,

Parth



Attachment: video_of_error_ea2d881a.zip

5 Replies
BC Berly Christopher Syncfusion Team July 6, 2021 06:22 AM UTC

Hi Parthkumar, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue in the mentioned product version (18.1.0.57) and latest version (19.2.0.44). When entering the value manually in the DateRangePicker component, there is console error is occurred. For your convenience, we have prepared the sample and attached it below. 
  
  
Please check the above sample and share the below requested details that will help us to check and proceed further from our end. 
  
·       Have you faced this issue inside the Grid component else stand alone DateRangePicker component? 
·       Code snippet of component rendering 
·       If possible, please upgrade the Syncfusion product version and confirm us. 
·       Modify the attached sample with reported issue else, share simple issue reproducing sample. 
  
Regards, 
Berly B.C 


PK Parthkumar Kakadiya July 6, 2021 03:11 PM UTC

Hi Berly,

I have updated the product version (19.2.44) as you mentioned. 


Yes , you assume correct, that I am using the ejs-daterangepicker inside the grid component. Only this place it throws that error. Apart from that working fine with the blur function.  

I attached the component where it throws an error.

let me know how can i fix this problem. 


regards,

Parth


Attachment: ejsdaterangepicker_error_c9dbb064.zip

SK Sujith Kumar Rajkumar Syncfusion Team July 7, 2021 12:37 PM UTC

Hi Parth, 
 
We checked the reported problem by rendering a date range picker in the Grid filter template but unfortunately were unable to reproduce it from our end. You can check the below sample for reference, 
 
 
Based on the shared video demo, we could see that the console error is thrown from the onTimerTick method of the Grid filter action but this method will not be triggered when filter template is used for the column. So we suspect that this problem might be getting reproduced either due to cached memory of the browser restoring old settings or due to duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. So please follow the steps provided below to remove duplicate packages(if any),  
 
  • Delete package.lock.json file from your application.  
  • Remove the @syncfusion package folder from the node_modules.
  • Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
  • Then install the NPM packages.
 
And then clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 
 
If problem still persists it would be helpful to identify your exact problem scenario if you could share us a reproducible sample or replicating the problem case in the above shared sample to validate further on this. 
 
Regards, 
Sujith R 


PK Parthkumar Kakadiya July 8, 2021 09:21 AM UTC

Hi Sujith,

I tried your suggestion. I tried to update version of syncfusion but it's behaving strange. Now ejs-daterangepicker not working at all.


When I click on calendar icon throwing this error:

  

Also could you please suggest me what should i do to update all syncfusion product version. Coz once I tried few of the product throwing error and not working at all.

these are my current version: 

"@syncfusion/ej2-angular-calendars": "18.1.57",
"@syncfusion/ej2-angular-documenteditor": "19.2.44",
"@syncfusion/ej2-angular-dropdowns": "19.2.44",
"@syncfusion/ej2-angular-grids": "18.1.59",
"@syncfusion/ej2-angular-inputs": "19.2.44",
"@syncfusion/ej2-angular-navigations": "19.2.44",
"@syncfusion/ej2-angular-pdfviewer": "19.2.44",
"@syncfusion/ej2-angular-schedule": "18.1.56",



Regards,

Parth


SK Sujith Kumar Rajkumar Syncfusion Team July 9, 2021 10:02 AM UTC

Hi Parth, 
 
Please find the response for your queries below, 
 
Query – 1: “I tried your suggestion. I tried to update version of syncfusion but it's behaving strange. Now ejs-daterangepicker not working at all.” 
 
Based on the provided information and error details we suspect that you might be facing problem because of not loading the required culture files for the calendar control(rendered in the Grid filter) since you have applied localization to it. You can resolve this by loading the following culture files from the cldr-data of the ’node modules’ – ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'] from the required culture present inside the main folder(‘de’ culture for your case) and also [ 'numberingSystems.json', 'weekData.json'] files from the supplemental folder in your sample as demonstrated in the below code snippet, 
 
declare var require: any 
 
import { loadCldr, L10n } from '@syncfusion/ej2-base'; 
 
loadCldr(require('cldr-data/main/de/currencies.json'), 
  require('cldr-data/main/de/numbers.json'), 
  require('cldr-data/main/de/ca-gregorian.json'), 
  require('cldr-data/main/de/timeZoneNames.json'), 
  require('cldr-data/supplemental/numberingSystems.json'), 
  require('cldr-data/supplemental/weekData.json') 
); 
 
Please find the modified Grid sample prepared based on this for your reference, 
 
 
More details on globalization can be checked in the below documentation link, 
 
 
Query – 2: “Also could you please suggest me what should i do to update all syncfusion product version. Coz once I tried few of the product throwing error and not working at all.” 
 
For always using the updated packages for the Syncfusion components, you can specify the package version as “*” in the package.json file and then install the npm packages. 
 
"@syncfusion/ej2-angular-calendars": "*", 
"@syncfusion/ej2-angular-grids": "*", 
 
However, if you just need to update the components to the current latest version, then you can do the same by checking the latest package version for the components used in your application from the npmjs website(Grid package - https://www.npmjs.com/package/@syncfusion/ej2-angular-grids), specifying it in the package.json file and then install the npm packages. 
 
Note: For both these approaches or while updating specific Syncfusion component packages, we suggest you to follow the steps provided in the previous update in order to ensure that no duplicate packages are installed in the package folder(as it might cause errors). 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


Loader.
Up arrow icon