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.

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

Allow approximate dates to be typed in: "2022-10" and "2022" #124

Open
EmilStenstrom opened this issue Oct 30, 2022 · 1 comment
Open

Allow approximate dates to be typed in: "2022-10" and "2022" #124

EmilStenstrom opened this issue Oct 30, 2022 · 1 comment

Comments

@EmilStenstrom
Copy link

EmilStenstrom commented Oct 30, 2022

Hello! really appreciate all the hard work you've put into this library!

I use it for a site where you can visualise your family tree generations back. Because of this, when you go back in time, some dates will be approximate. Maybe you just know the year, or just a year and date. In the backend I support this by allowing both YYYY-MM-DD, YYYY-MM, and YYYY in the same field. I'd like to allow the user to type in those values, no need to support them in the actual picker.

Problem is, I the datepicker seems to try to parse the year to a full date.

It looks like I should be able to give a private format option, define a toValue and toDisplay value. But I can't figure out how to reuse all of your wondeful existing logic. I don't want to copy your whole parser, so I was hoping that I could call that existing parser, except for the cases where the format matches YYYY-MM or YYYY...

Is there someone that reads this that could give some pointers that can help me achieve this?

My setup is as simple as this:

var options = {
    format: "yyyy-mm-dd",
    weekStart: 1,
    format: {
        toValue(date, format, locale) {
            ...
        },
        toDisplay(date, format, locale) {
            ...
        },
    },
};
var elements = document.querySelectorAll('.date input');
elements.forEach((elem) => { new Datepicker(elem, options) });
@EmilStenstrom
Copy link
Author

Ok, so you might feel a bit dirty reading this, sorry about that... I have something that works. It's using a global variable to remember the last used format for toValue, and applies that format to toDisplay.

var lastFormat = "yyyy-mm-dd";
addEventListener('load', function(event) {
    var elements = document.querySelectorAll('.date input');
    elements.forEach((elem) => { new Datepicker(elem, {
        format: {
            toValue(date, format) {
                if (date.match(/^\d{4}-?$/)) {
                    lastFormat = "yyyy";
                }
                else if (date.match(/^\d{4}-\d{2}-?$/)) {
                    lastFormat = "yyyy-mm";
                }
                else {
                    lastFormat = "yyyy-mm-dd";
                }
                return Datepicker.parseDate(date, lastFormat);
            },
            toDisplay(date, format) {
                let currentFormat = lastFormat;
                lastFormat = "yyyy-mm-dd";
                return Datepicker.formatDate(date, currentFormat);
            },
        },
    })});
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant