question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePicker component does not support changing yearStart with DayJS localization

See original GitHub issue

Reproduction link

https://stackblitz.com/edit/react-ts-dx5ysf?file=App.tsx

Steps to reproduce

  1. Install DayJS
  2. Replace momentjs with dayjs
  3. Update locale to start the year with any week other than 1.
  4. Instantiate a datepicker[picker=‘week’]
  5. Observe year start remaining the same
import * as React from 'react';
import './style.css';
import 'antd/dist/antd.css';
import dayjs, { Dayjs } from 'dayjs';
// import { dayjs } from 'dayjs';
import updateLocale from 'dayjs/plugin/updateLocale';
import localeData from 'dayjs/plugin/localeData';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

dayjs.extend(updateLocale);
dayjs.extend(localeData);
const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

/**
 * DayJS Custom Localization:
 *
 * https://day.js.org/docs/en/customization/customization
 */

dayjs.updateLocale('en', {
  yearStart: 4, // February 1st (does NOT work)
  weekStart: 4, // Thursday (works)
});

export default function App() {
  return (
    <div>
      <DatePicker picker="week" />
    </div>
  );
}

Screenshot

image

What is expected?

Year to begin at the specified week (4th week of the year / Feb 1st).

What is actually happening?

Year always begins on January 1st. (1st week of the year / Jan 1st)

Environment Info
antd 4.23.1
React 17.0.1
System MacOS Monterey Version 12.6 (21G115)
Browser Chrome Version 105.0.5195.125 (Official Build) (arm64)

Trying to implement business requirements.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
iamkuncommented, Sep 17, 2022

seems Jan 16 should not be the first week of the year

1reaction
iamkuncommented, Sep 16, 2022

Jan 32 is an invalid date

Read more comments on GitHub >

github_iconTop Results From Across the Web

Customize
Day.js is very easy to customize. You can create a new locale. var localeObject = {...} // Day.js locale Object, detailed below dayjs.locale('en-my-settings', ......
Read more >
Date picker > Explore replacing Pickaday (#1890) · Issues · GitLab ...
Screen-reader: announces current value, days/dates in calendar. Compatibility: current <gl-datepicker> props and Vue 2.x/3.x; Performance: small dependancy ...
Read more >
Clean jQuery Date and Time Picker Plugin - datetimepicker
datetimepicker is a jQuery plugin that popups a simple and clean date & time picker interface when an input field on focus.
Read more >
PHP Calendar Date Picker - TriConsole
The calendar component written in php script. It contains 2 modes: normal display calendar and date picker. See the demo below to check...
Read more >
Date and Time Functions - Alpha Anywhere Documentation
Returns the days between the specified datetime values. If t2 is a date later ... Converting to a dot variable "P" is not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found