[Bug] wrong (missing) week number displayed

[SoerenJantzenDtad]

Vue2-datepicker version: 3.10.2
Vue version: 2

By using the "show-week-number" flag of the datepicker, we had a confusing image at the end of 2021:

Actually the year 2021 had 52 weeks and the week with number 52 should be from 2021-12-27 to 2022-01-02.

The problem is caused by the first weeks in january:

The first problem is, that the first week of 2021 should have been the one from 2021-01-04 to 2021-01-10 and the second problem is, that the week with number 2 is missing. This behavior seems to be similar at every year.

Thanks for the great datepicker and best regards!

[mengxiong10]

Can you show your code, I can't reproduce the problem

And you can override the function of gerWeek

<date-picker :formatter="formatter" />

data() {
  return {
    formatter: {
      //[optional] getWeekNumber
      getWeek: (date) => {
        return // a number
      }
    }
  }
}

[SoerenJantzenDtad]

Thanks for your fast reply.

The datepicker is implemented as a part of a vue2 component.

...
             <DatePicker
                :disabled="disabled"
                v-on:focus="onFocus($event)"
               ...
                :open.sync="openPicker"
                v-model="localValue"
                type="date"
                value-type="DD.MM.YYYY"
                format="DD.MM.YYYY"
                time-title-format="DD.MM.YYYY"
                show-week-number
                placeholder="TT.MM.JJJJ"
                title-format="DD.MM.YYYY"
                input-class="mx-datepicker-input-2"
                :editable="false"
            />
        </div>
    </div>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/de';

export default {
    components: {
        DatePicker
    },
...

The hint with overriding the function is very helpful, but as i can see in your comment, it is working quite properly in general... Maybe you can see some problem in my stated code. :/

[Vince71-C]

Thank you so much for the solution!

In fact the "date-format-parse" used to get the week number returns a wrong value (in my case with french locale, but I can't say for other countries).
You can override and use "moment js" to get the correct week number. Works like a charm.

// Import moment js and set locale
import moment from 'moment'
moment.locale('fr');

// override getWeek
data: {
    return {
        formatter: {
            getWeek: (date) => {
                return moment(date).week()
            }
        }
    }
},

[mengxiong10]

Thank you so much for the solution!

In fact the "date-format-parse" used to get the week number returns a wrong value (in my case with french locale, but I can't say for other countries). You can override and use "moment js" to get the correct week number. Works like a charm.

// Import moment js and set locale
import moment from 'moment'
moment.locale('fr');

// override getWeek
data: {
    return {
        formatter: {
            getWeek: (date) => {
                return moment(date).week()
            }
        }
    }
},

Thanks for feedback, I'll check the getWeek function of date-format-parse

[SoerenJantzenDtad]

Hi @mengxiong10 ,
are there any updates checking the function?

[mengxiong10]

@SoerenJantzenDtad
I didn't find the problem, can you help me reproduce it on codesandbox.