Wijmo globalization - Set default datetime format

Wijmo globalization - Set default datetime format

Posted by: andrei.iacob on 15 August 2023, 2:23 am EST

• 

  andrei.iacob

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 August 2023, 2:23 am EST

  Hello,

  It is possible to set the date / datetime format on a global level similar with setting up the culture?
  
  Basically instead of passing each time the format to date and datetime inputs it is possible to set it up once and then fetch it automatically as a default if no format is provided? Currently the format is defaulted to ‘d’ is no “format input” property is set to the control.

  Reference links:
  
  https://www.grapecity.com/wijmo/api/classes/wijmo.globalize.html
  
  https://www.grapecity.com/wijmo/docs/Topics/Input/InputDate/InputDate-Customization
  
  https://www.grapecity.com/wijmo/api/classes/wijmo_input.inputdate.html#format

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 15 August 2023, 4:44 pm EST

  Hi,

  Yes, you can set the InputDate/ nputDateTime format on a global level by extending the InputDate and InputDateTime classes and setting a default value for the format property.

  You can refer to the following sample demonstrating the same - https://jscodemine.grapecity.com/share/MagEsROMB02rrkjgsCXh7A/

  In case, you face any issues, please let us know.

  Regards

• 

  andrei.iacob

  • Post Options:
  • Link
    Copy

  Posted 15 August 2023, 8:02 pm EST

  Hello,

  So we still need to pass the value into the property. I will try to explain the context a little bit more.
  
  So basically we use wijmo in an angular application and we want to change the date / datetime format for all the wijmo date/datetime controls… e.g. wj-input-date, wj-input-date-time, wj-flex-grid etc in one place if possible

  Something similar with: “wijmo.changeCulture(“en”);”

  https://www.grapecity.com/wijmo/demos/Core/Globalization/Formatting/angular

  Regards

• 

  andrei.iacob

  • Post Options:
  • Link
    Copy

  Posted 15 August 2023, 8:04 pm EST

  It is possible to achieve this in one go? Or in a generic way… to avoid passing the format for each control…

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 16 August 2023, 4:03 pm EST

  Hi Andrei,

  For now, there is no direct property or method available to implement that, however, you can directly modify the date format patterns in the culture to get your desired results like this -

  import * as wijmo from '@grapecity/wijmo';
  
  //change 'd' format
  wijmo.culture.Globalize.calendar.patterns['d']="dddd, MMMM dd, yyyy";
  // for InputDateTime, as the default format set in InputDateTime control is 'g'
  wijmo.culture.Globalize.calendar.patterns['g']="dddd, MMMM dd, yyyy"; 

  You can also refer to the following updated sample for the same - https://jscodemine.grapecity.com/share/P3H0rpn7VkS6Vo3Y3jdcJw/

  Regards

• 

  andrei.iacob

  • Post Options:
  • Link
    Copy

  Posted 17 August 2023, 7:04 pm EST

  Hello,

  Ok we could use this approach to change the format but there are some issues that we need to understand properly:

  1. After we change the format if we want to reset to previous version how can we do that?
     
     → if we use “wijmo.changeCulture(‘en’);” for example it doesn’t override with the english format as we expect… it remains whatever we changed before calling the changeCulture method

  2. When we change the format the controls are not refreshing automatically as we expect… only when we choose a new date is refreshing… how we can force the refresh when we change the format via

  //change ‘d’ format
  
  wijmo.culture.Globalize.calendar.patterns[‘d’]=“dddd, MMMM dd, yyyy”;
  
  // for InputDateTime, as default format set in InputDateTime control is ‘g’
  
  wijmo.culture.Globalize.calendar.patterns[‘g’]=“dddd”;

  In this example things are working but it’s a combination between changing culture and using the format “input” property directly:

  https://www.grapecity.com/wijmo/demos/Core/Globalization/Formatting/angular

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 20 August 2023, 8:31 pm EST

  Hi Andrei,

  1. If you want to reset the date format then you’ll have to modify the culture patterns again and set the previous date format.

  2. You can explicitly refresh all Wijmo controls after changing the format by using the refreshAll function in the Control class, like this -

  wijmo.Control.refreshAll();

  You can refer to the following sample for the same - https://jscodemine.grapecity.com/share/mUddFq-CYEiWpojv_cL_UQ/

  Regards