Datepicker to save value in YYYY/MM/DD format | Community
Skip to main content
ashishkhadpe
ashishkhadpe
Level 3
September 11, 2020
Solved

Datepicker to save value in YYYY/MM/DD format

  • September 11, 2020
  • 3 replies
  • 7753 views

Hi All,

 

We have just migrated from classic UI to touch UI and we are currently using a datepicker field.

 

The problem we are facing right now is that, our classic UI dialog have stored the value for date in YYYY/MM/DD format and we are trying to save in same format in touch UI using granite/ui/components/coral/foundation/form/datepicker. I have added below properties to the field but still not working. Any quick solution?

 

<preselectedDate
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
        fieldDescription="Enter date in this format yyyy/mm/dd"
        fieldLabel="Pre-selected date"
        name="./preselectedDate"
        required="{Boolean}false"
        displayedFormat="YYYY/MM/DD"
        valueFormat="YYYY/MM/DD" 
        storedValue="YYYY/MM/DD"
        type="date"/>
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Suraj_Kamdi

    @ashishkhadpe 

     

    Please go through this wonderful blog

     https://blogs.perficient.com/2018/10/18/a-way-to-handle-dates-in-aem/

    3 replies

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    September 11, 2020

    Hi @ashishkhadpe,

    For the datepicker field,

    • valueFormat  should be YYYY-MM-DD[T]HH:mm:ss.SSSZ. Otherwise while submitting the dialog, we will get PerisistenceException (Invalid date)
    • displayedFormat can be with slash (like the one you have - YYYY/MM/DD)
    • storedValue is not a valid property and hence to be removed.

    If you still want the date to be saved like YYYY/MM/DD, alternative it is to save it as String type and not as Date type. This is possible with property named typeHint and value as String. 

    Retrieval logic should then be handled accordingly. 

    Related doc for reference:

      ashishkhadpe
      ashishkhadpeAuthor
      Level 3
      September 14, 2020
      What are the changes required for multi-field. Any idea?
      Theo_Pendle
      Theo_Pendle
      Level 8
      September 11, 2020

      Hi @ashishkhadpe,

      Is your problem the following?

      If this is the case then here is the answer 🙂

      The reason for your problem is that providing a custom valueFormat, you are violating the JCR's definition of a date, which you can see here in the spec: https://docs.adobe.com/docs/en/spec/jcr/1.0/6.2.5.1_Date.html 

      As you can see, a JCR date must follow a certain format, which is not the case for your property. Instead, you should save your date as a String by adding 

      typeHint="String"

      The type hint (documentation here: https://sling.apache.org/documentation/bundles/manipulating-content-the-slingpostservlet-servlets-post.html#typehint) tells Sling (which is receiving the POST request to update the JCR when you save a component) to override the default property format and save the value as a "2020/09/11" instead of a Date.

      Hope that helps, let me know! 🙂

       

        Suraj_Kamdi
        Community Advisor
        Suraj_KamdiCommunity AdvisorAccepted solution
        Community Advisor
        September 14, 2020

        @ashishkhadpe 

         

        Please go through this wonderful blog

         https://blogs.perficient.com/2018/10/18/a-way-to-handle-dates-in-aem/

          ashishkhadpe
          ashishkhadpeAuthor
          Level 3
          September 14, 2020
          I guess the solution given in above blog works fine for single field. What are the changes required for multi-field. Any idea?
          Terms & ConditionsAccessibility statement

          Loading footer...