Display datetime at format ("YYYY-MM-DD") in v-calendar (VueJS)

Question

          <DatePicker
            v-model="date"
            is-expanded
            is24hr
            :attributes="attrs"
            :model-config="{
              type: 'string',
              mask: 'YYYY-MM-DD HH:mm',
            }"
            mode="date"
          >
          </DatePicker>

I tried to add "model-config" like this to , but it still displayed in screen with "MM-DD-YYYY" format, the data in date is in correct format ("YYYY-MM-DD HH:mm").

Dislpay in screen : "12-20-2021" (INCORRECT) => What I want: "2021-12-20" data in date variable: "2021-12-20 14:20" (CORRECT)

That's is very weird. So how can I change the DISLPAY format of this datetime. Thank you guy so much. I'm using v-calendar version 2.

Answer 1

            <DatePicker
                v-model="date"
                is-expanded
                is24hr
                :attributes="attrs"
                :model-config="{
                  type: 'string',
                  mask: 'YYYY-MM-DD HH:mm',
                }"
                :masks="{ L: 'YYYY-MM-DD' }"
                mode="date"
              >
              </DatePicker>

I fixed this problem by adding masks like below: :masks="{ L: 'YYYY-MM-DD' }" as a attribute and it works perfectly.