Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong Weekdays #150

Closed
PhilippLeh opened this issue Jun 13, 2023 · 8 comments
Closed

Wrong Weekdays #150

PhilippLeh opened this issue Jun 13, 2023 · 8 comments

Comments

@PhilippLeh
Copy link

The Datepicker shows the wrong weekday, or do I miss something?

image
@onesine
Copy link
Owner

onesine commented Jun 13, 2023

Hi 👋 @PhilippLeh

Thank you for your feedback.

Can you show us your code so that we can reproduce this problem.

@PhilippLeh
Copy link
Author

PhilippLeh commented Jun 13, 2023 •
edited
Loading

Implementation

import {NextPageWithLayout} from "../common/types/Page";
import Head from "next/head";
import React, {useState} from "react";
import Datepicker from "react-tailwindcss-datepicker";

const Test: NextPageWithLayout = () => {

    const [date, setDate] = useState({startDate: null, endDate: null})

    // @ts-ignore
    const handleChange = (newDate) => {
        setDate!({startDate: newDate.startDate, endDate: newDate.endDate});
    };

    return (
        <div className="w-1/4">
            <Datepicker
                // @ts-ignore
                value={date}
                label="Datumsbereich"
                onChange={handleChange}
                useRange={true}
                showFooter={true}
                showShortcuts={true}
                asSingle={false}
                configs={{
                    shortcuts: {
                        today: "Heute",
                        yesterday: "Gestern",
                        past: period => `Letzten ${period}-Tage`,
                        currentMonth: "Dieser Monat",
                        pastMonth: "Letztes Monat",
                        thisYear: {
                            text: "Dieses Jahr",
                            period: {
                                // @ts-ignore
                                start: new Date(new Date().getFullYear(), 0, 1),
                                // @ts-ignore
                                end: new Date()
                            }
                        }
                    },
                }}
                separator="-"
                displayFormat="DD.MM.YYYY"
                startWeekOn="mon"
                language="de-at"
            />
        </div>
    )
}

Test.getLayout = (page: any) => {
    return (
        <>
            <Head>
                <title>
                    Test
                </title>
            </Head>
            {page}
        </>
    )
}

export default Test

Result
image

package.json

{
    "name": "test",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "prod": "next build && next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@emotion/react": "^11.11.0",
        "@emotion/styled": "^11.11.0",
        "@headlessui/react": "^1.7.14",
        "@headlessui/tailwindcss": "^0.1.3",
        "@heroicons/react": "^2.0.18",
        "@hookform/resolvers": "^3.1.0",
        "@mui/icons-material": "^5.11.16",
        "@mui/material": "^5.13.3",
        "@react-email/body": "^0.0.2",
        "@react-email/button": "^0.0.8",
        "@react-email/components": "^0.0.6",
        "@react-email/container": "^0.0.8",
        "@react-email/head": "^0.0.5",
        "@react-email/heading": "^0.0.8",
        "@react-email/html": "^0.0.4",
        "@react-email/preview": "^0.0.6",
        "@react-email/text": "^0.0.5",
        "@tailwindcss/forms": "^0.5.3",
        "@types/nodemailer": "^6.4.8",
        "@upstash/qstash": "^0.3.6",
        "axios": "^1.4.0",
        "dancemonkey-dal": "*",
        "dayjs": "^1.11.7",
        "eslint-config": "*",
        "form-data": "^4.0.0",
        "html-to-image": "^1.11.11",
        "next": "13.4.1",
        "next-auth": "^4.22.1",
        "nodemailer": "^6.9.3",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-email": "^1.9.3",
        "react-email-editor": "^1.7.8",
        "react-hook-form": "^7.44.2",
        "react-multi-carousel": "^2.8.4",
        "react-query": "^3.39.3",
        "react-tailwindcss-datepicker": "^1.6.1",
        "react-toast": "^1.0.3",
        "ts-config": "*",
        "yup": "^1.2.0"
    },
    "devDependencies": {
        "@rvxlab/tailwind-plugin-ios-full-height": "^1.1.0",
        "@types/node": "20.2.5",
        "@types/react": "18.2.7",
        "@types/react-dom": "18.2.4",
        "@typescript-eslint/eslint-plugin": "latest",
        "autoprefixer": "^10.4.14",
        "eslint": "8.41.0",
        "eslint-config-next": "13.4.4",
        "eslint-config-prettier": "latest",
        "eslint-config-turbo": "latest",
        "eslint-import-resolver-typescript": "latest",
        "eslint-plugin-import": "latest",
        "eslint-plugin-jest": "latest",
        "eslint-plugin-jest-dom": "latest",
        "eslint-plugin-react": "latest",
        "eslint-plugin-storybook": "latest",
        "eslint-plugin-testing-library": "latest",
        "orval": "^6.16.0",
        "postcss": "^8.4.24",
        "tailwindcss": "^3.3.2",
        "typescript": "5.0.4"
    },
    "resolutions": {
        "webpack": "^5"
    }
}

Just to mention as in my last issue, I'm using a monorepo.

@onesine
Copy link
Owner

onesine commented Jun 13, 2023 •
edited
Loading

@PhilippLeh I have just published a new version. Can you try it and close this exit if it's ok.

@PhilippLeh
Copy link
Author

@onesine I'm sorry, but that didn't change anything.

@PhilippLeh
Copy link
Author

PhilippLeh commented Jun 14, 2023 •
edited
Loading

@onesine I just pulled the repo and replaced the usage in my code, to debug this issue and thats what I found:

The previous days were empty, because I got the first day in the month in the wrong format. To get the full name of the weekdays I had to change the format from

ddd (Displays the day as an abbreviation, Sun-Sat)

to

dddd (Displays the day as a full name, Sunday-Saturday)

Furthermore dayjs somehow returned the weekdays already in the right language (in my case german), so I also had to translate the getNumberOfDay mapping like so:

["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"].forEach(
        (item, index) => {
            if (item.includes(dayString)) {
                number = (index + startDateModifier) % 7;
            }
        }
    );

It definitely has something to do with my repo as no one else faces this issue. Maybe its because of some dayjs config/usage outside the datepicker, but I have not figured out yet why this happens, it now works for me.

@onesine
Copy link
Owner

onesine commented Jun 14, 2023

I'm sorry I couldn't find a solution for you. This is a very peculiar situation. I'm going to keep looking into the problem, though.

@PhilippLeh
Copy link
Author

No worries, thanks a lot for your effort!

@cheeselemon
Copy link

I, too, encountered this bug, and found the reason for this after thoroughly looking at the codebase.

Apparently if you declare dayjs.locale() somewhere alongside using this library,
the weekday matching function below will fail:

react-tailwindcss-datepicker/src/helpers/index.ts

Line 174 in bf063fe

["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].forEach(

because the date argument provided using getFirstDayInMonth(date).ddd
will return what was defined through dayjs.locale() other than "en" will return non english weekday string,
thus won't match anything so the variable number will always be zero.

I'm implementing a fix, and will update with a pull request.

This was referenced Dec 7, 2023
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cheeselemon @onesine @PhilippLeh