I've wasted a lot of time looking for how to customize and change the colors.
It would be good if they are mentioned in the documentation that the colors can be passed as a parameter.

In the end I found it in the sanbox example.
I put the example here in case someone else happens the same

const calendarTheme = {
	theme_color: '#19212b', //#19212b
	main_background: '#1f2936',
	active_text_color: '#cfe6ff',
	inactive_text_color: 'rgba(62,85,110,0.85)',
	picker_header: {
		active: '#8ea5bd'
	},
	weekday: {
		foreground: '#53A6FA' //rgba(35,68,97,0.8)
	},
	display: {
		foreground: '#8ea5bd'
	},
	date: {
		active: {
			picked: {
				background: '#53a6fa'
			}
		},
		marcked: {
			foreground: '#53a6fa'
		}
	},
	button: {
		danger: {
			foreground: '#af002a'
		},
		success: {
			foreground: '#53a6e8'
		}
	}
};

const picker = MCDatepicker.create({
    el: '#datepicker',
     theme: calendarTheme 
});

Firstly, what an awesome plugin. Design is great and easy to use, we'll documented.

Create Calendar timeZone Specific

Use case:
mygiftshop website(store based in Australia) allows users from around the world
to purchase a gift and have it delivered to their family in AU on a certain date.

Could we set the timeZone of the calendar displayed to the user?
Is there a quick workaround for this?

Cheers Thank you,

Hi Mike,

After last time I have emplemented the amazing MCDatepicker to another page where I use some jQuery button click events to hide/show/toggle text and DIV´s, but when I use the MCDatepicker and click any element in it it toggles my DIV´s and, and I was wondering if it was possible that the MCDatepicker somehow could be coded so that it would only target what it should, meaning the specific datepicker input, so to avoid that it will interact with other elements in a page? .. i.e if you have 2 datepickers or more with different ids, so that the click handling could be set to only target the specific element and not anything else whether it is DIV´s, Buttons .. I hope this gives meaning, else I will be happy to explain further :-)

Hey,

sorry for this bad title / my bad english.

In the documentation (really neat!) you mention the webhooks for closing (https://mcdatepicker.netlify.app/docs/event-hooks#onclose).

Those work like a charm. Is it somehow possible to find out, if the modal was closed by clicking on "ok" or "cancel"?

Both datepicker objects carry a date and i cannot see any attribute to differ those.

Thank you :)

Hi, first of all, amazing work so far on this feature that you made and maintain.

I was wondering if you were considering implementing an optional time picker feature. Basically, the additional part where a person can pick/select hours and minutes. Something like Flatpickr did.

I would like to present the interface in several languages, but I didn't see how to deal with that in the issues/docs or if it is even possible at all?
Thanks for any tips,
Pedro

Hi, i want to display the picker directly in the page flow. Any idea how to do this ? (Basically it would need a new option to render as "embedded" or something like that.

Thanks

Hi Mike,

I have the MCDatepicker running on several pages in my project, but I am expirience some issues with it on a specific page (all other works) but I have spent 2 days debugging what script it is that is breaking the MCDatepicker on that specific page and to be frank I cannot find it, so I hope you would be able to point me in the right direction. (I am using the CDN so I am runnig the latest version)

The Error I get is :

mc-calendar.min.js:1 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLInputElement'
    |     property 'jQuery351066511655056161862' -> object with constructor 'Object'
    |     property 'Parsley' -> object with constructor 'Field'
    --- property 'element' closes the circle
    at JSON.stringify (<anonymous>)
    at VM30899 mc-calendar.min.js:1
    at Array.find (<anonymous>)
    at Object.open (VM30899 mc-calendar.min.js:1)
    at Object.open (VM30899 mc-calendar.min.js:1)
    at HTMLInputElement.U.e.linkedElement.e.linkedElement.onfocus (VM30899 mc-calendar.min.js:1) 

I am quite certain that another script is causing this, but as I wrote before I have not been able to figure out why and which it is .. Can you help? :-)

Hey,

we sometimes need to replace the whole body-element with new html.

When i try to open up the calendar (by creating a new constant) it wont show up.

Do you have a fix for this?

Here is an example (with jquery):

 <!DOCTYPE html>
 <html lang="de">
 
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Titel</title>
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
         integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
     <link rel="stylesheet" href="node_modules/mc-datepicker/dist/mc-calendar.min.css">
     <script src="node_modules/mc-datepicker/dist/mc-calendar.min.js"></script>
 
 </head>
 
 <body>
 
     <div class="form-field">
         <label class="form-field__label">Datepicker Demo</label>
         <input id="datepicker" type="text">
     
         <button id="delete">delete</button>
         <button id="open">open again - not working</button>
     </div>
 
 
     <script>
         $(function () {
         
             $(document).on("click", "#datepicker", function () {
                 const test = MCDatepicker.create({
                     dateFormat: 'DDD.DD.MM.YYYY'
                 });
             
                 test.open();
             })
         
             $(document).on("click", "#delete", function () {
                 $(".mc-calendar").remove();
             })
         
             $(document).on("click", "#open", function () {
                 const test = MCDatepicker.create({
                     dateFormat: 'DDD.DD.MM.YYYY'
                 });
             
                 test.open();
             })
         
         });
     </script>
 </body>
 
 </html>

I'm using Edge on Android most of the times and i just noticed that min(), max() and clamp() dont work there, so the datepicker looks like this

Hello, I really love this date picker and I want to show my full support for the developent of it!

I have found one bug, a minor one, kinda funny one, if I select a year that is two digits then the calendar will jump to 19XX, XX being the year selected. I have uploaded a video showcasing the bug to yt if I need to understand what is happening. I guess the problem is that it automatically converts XX into 19XX.

https://youtu.be/mS1C46Jji18

Thanks for this awesome repo!

Version 0.6.0 throws the following error when a page load which uses the date picker:

mc-calendar.min.js:1 Uncaught TypeError: Cannot read property 'appendChild' of null
    at oe (mc-calendar.min.js:1)
    at Ce (mc-calendar.min.js:1)
    at Object.create (mc-calendar.min.js:1)
    at HTMLDocument.<anonymous> (test_webpage.php:187)
    at fire (jquery-latest.js:3119)
    at Object.fireWith [as resolveWith] (jquery-latest.js:3231)
    at Function.ready (jquery-latest.js:3443)
    at HTMLDocument.completed (jquery-latest.js:3474)

This occurs whether I reference MCDatepicker with the CDN links or with files stored locally

I've downgraded to v5.1.0 using locally saved files and everything works perfectly.

Here is my code for a typical instance of the datepicker:

            <div id="waffle_area">    
                <div id="waffle_container" style="width: 400px; height: 500px; margin-right: 650px; margin-left: 650px; border:1px solid black; background-color: white; margin: 5px auto" class="right"></div>
                <div class="input__wrapper">
                    <input id="Selected_Date" type="text" class="form-field__input form-field__input--coupled" readonly>
                    <button id="datepicker_btn" class="btn btn--small">
                    <svg class="calendarIcon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"	focusable="false" data-prefix="far" data-icon="calendar-alt" role="img" viewBox="0 0 448 512">
                        <path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z" />
                    </svg>
                    </button>
                </div>
            <script>
                const datepickerBtn = document.querySelector('#datepicker_btn')
                const dateInput = document.querySelector('#Selected_Date')

                $(function () {
                    const dayOptions = {

                        dateFormat: 'DD MMMM YYYY',
                        bodyType: 'modal',
                        showCalendarDisplay: true,
                        disableWeekends: false,
                        firstWeekday: 1,
                        minDate: new Date("2021-01-10"),
                        maxDate: new Date(Date.now()- (41.5*60*60*1000)),
                        selectedDate: new Date(Date.now()- (41.5*60*60*1000)),
                        closeOndblclick: true,
                        closeOnBlur: true
                    }
                    myDatePickerDate = MCDatepicker.create(dayOptions);
                    document.getElementById("Selected_Date").value = myDatePickerDate.getFormatedDate();
                    myDatePickerDate.onSelect(() => {
                        document.getElementById("Selected_Date").value = myDatePickerDate.getFormatedDate();
                        loadWaffleChart();
                    });

                    datepickerBtn.onclick = () => {
                        myDatePickerDate.open();
                    }

                });
            </script>
            </div>

I hope this helps resolve the error

When I set option autoClose:true , I got this error

mc-calendar.min.js:1:6609
Error: Property "autoClose" is not recognized
n https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
S https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
create https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
S https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
S https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
create https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1

mc-calendar.min.js:1:27825
Uncaught TypeError: n is undefined
he https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
create https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
he https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
create https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js:1
InnerModuleEvaluation self-hosted:2379
evaluation self-hosted:2330

Thanks for the plugin!
It would be helpful if you could choose a whole week.
for this it would be sufficient to display the calendar weeks in the plugin and to make them selectable.

Hi, it's giving me issue :

although I don't change allowedYears but I changed name of days.

How to fix this?

if autoClose: true is set, window closes when you click on a month.

Hello,

The datepicker works fine. I can configure everything - disableMonths, disableYears, markDates ect.

The only thing I can't configure is "disableDates". No reaction, the days can still be selected in the calendar.
Any ideas?

MCDatepicker.open('#datepicker');
const datepicker = MCDatepicker.create({
el: '#datepicker',
allowedYears: [2022, 2021],
bodyType: 'inline',
disableWeekDays: [],
autoClose: true,
dateFormat: 'dd.mm.yyyy',
showCalendarDisplay: false,
firstWeekday: 1,
customWeekDays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
customMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
markDates: [new Date(2022, 4, 4), new Date(2022, 6, 11)],
disableDates: [new Date(2022, 2, 26), new Date(2022, 12, 27), new Date(2022, 2, 28)]
});

Hello,

Every time I call the setFullDate function I get the following console error:

mc-calendar.min.js:1 Uncaught TypeError: Cannot read property '_id' of null at HTMLDivElement.<anonymous> (mc-calendar.min.js:1) at x (mc-calendar.min.js:1) at Object.setFullDate (mc-calendar.min.js:1) at rightArrowClickStart (test_webpage.php:221) at HTMLButtonElement.onclick (test_webpage.php:120)

However, my local code works as expected...

Here is a jsfiddle to the code, however the script error seems to stop that working properly, getFullDate is called when the arrow buttons for the start datepicker are pressed

Hi,

This change broke a form in one of my websites. Checkboxes/radios and submit button stopped working.
You should not e.preventDefault document clicks. Or if you do, make sure you let it through after your custom handler, for untreated cases.

7199591

Hello,

I would like to be able to implement a panel of buttons which change the date format of a particular datepicker instance if a button is pressed.

Is it possible to change the dateFormat property of a created datepicker instance with javascript from elsewhere on a page?

Thanks

I would love an option to change the minDate/maxDate dynamically. Like when you select a date from the first picker, the minDate of the second picker is set to the selected date + 2 days everytime.

I am unsure if this is working properly, as I cannot get it to work.

Example:
const secondCalendar = MCDatepicker.create({ el: '#end_date', showCalendarDisplay: 'false'});

I need the ability for the user to manually add in a date into the input field, with an option to launch the calendar via a separate button.

I have all of it almost working, I just need to NOT have the calendar launched when the input field is in focus (clicked) - but rather, launch the calendar from a button, and then populate the form field when clicking on OK.

#1:
I have found that when I set minDate: new Date(2021, 03, 29) instead of actually setting the first selectable date to 29th Martch 2021, the first selectable date is 29th April 2021, is this a bug?

#2:
I am not able to use language specific characters like i.e æ, ø and å in customWeekDays, which gives me an issue becaus Saturday and Sunday is spelled Lørdag and Søndag in Danish.

#3:
I am unable to find the styling attribute in the CSS file that allows me to position the Modal at a specific fixed or absolute position (I.e 50px from the top ), which gives me quite a headache since the modal opens in the middle of the page, and when your page is more than 4 pages long and you open the modal at the top of the page, the modal is out of site and you need to scroll 2 pages down.

Hope you have any idea how to fix these issues :-)

I have an implementation where I need to be able to select dates only by month and year (ie April 2016), as well as only the year (2016)

Have you considered implementing selector views that allow this?

Thanks

Before I describe the issue, I just wanted to say, thanks for the best Datepicker library that exists!
When using your library on Chromium based browsers, on a mobile view, with the modal bodyType, the mc-table__body seems to fill only half of the space available.

The issue only seems to exist on Chromium based browsers, when using Firefox, it works as expected.

I'd like to be able to define the range of selectable dates, is it possible to set min and max selectable dates?

I'm searching a way to highlight current day (done by default, ok) and user selected day (my question).
The 'selectedDate' parameter seems to be the answer but I don't know what to do with it.

Could you help me, please?

how to change the z-index of the date picker when using the top of the model (is comes in under the model)??

Great date picker !

I do have a question though. If you are on a current month you can't select any days from the next month:

https://www.screencast.com/t/jV5X1kWgG0ui

Is there a way of:

1. not displaying next months days
2. allow next months days to be selected?

I have looked through the documentation but can't see an option.

Would love to use this but that is a UX issue for our users for sure.

hej mike,
first of all thank you! the browser support for date input is such a crazy mess, what makes your MCDatepicker a welcome light at the end of the tunnel.

just a quick question how would i go about updateing the disableDates? i managed to update minDate by updateing the prevLimitDate variable of my MCDatepicker. but i can't figure out how to update disableDates..

and while i am here, have to admit i didn't look into it to much yet, but is there a way of hidding the input element and showing the MCDatepicker fixed on the page?

so long,...

I would like to select multiple dates; i think of three modes:

1. Mode: Select only a single day (default; just like now)
2. Mode: Select multiple (single) days
3. Mode: Select a date range (with start and end-date)

maybe this can be controlled with the initialization of the calendar.

hey,

first of all, really love the datepicker, looks awesome and works even better.

While i was implementing it i thought it would be really nice to have the possibility to just add the current language (eg EN,DE,FR...)
and the datepicker switches everything to that language. So basically localization.

Would just be a handy feature so you dont have to type out every month, day and button for every language on bigger sites.

selectedDate: new Date(2021,0, 22)

top code will select january !!

Would it be possible for you to add a simple setFullDate() method which takes a Date object and sets the value of the input using the current date format? I'd like to be able to set the date from elsewhere in my project, but not have to worry about the date format, I simply give you the date and you format it.

Also, as you have getDate(), getDay(), etc. methods, similar setDay(), setMonth(), etc. methods would be appreciated, allowing me to move the user selected date on a month, or forward a day, etc.

Hi @mikecoj :-)

I am using MCDatepicker on a page where I have a StartDate selector and a EndDate selector (2 different input fields) for each users listed on that page, and since I have multiple listet users on the page and two different date types it would be more userfriendly if I could add a headline to the MCDatepicker Modal so that the user operating the page could see which type and which user they are changing dates on .. would it somehow be possible to have that feature and? :-)

Some screensshot to illustrate:

(Red Arrows and boxes to illustrate suggestions for placement of the custom headline/text)

Best Regards
Stig :-)

Is it possible to have the datepicker always open with the inline mode if on a mobile browser, even if set as modal in the options? The modal option doesn't work well with browsers on my phone for instance. Perhaps an option to over-ride inlin on mobile could also be include if is necessary to show the modal version all the time.

Hello,
I'm trying to use tthe datepicker with webpack in symfony but webpack crash:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loader

i've installed the package with "yarn add mc-datepicker" and in my js : import MCDatepicker from 'mc-datepicker';

but which loader and how to load ?

thx ^^

Hey,

check this fiddle: https://jsfiddle.net/Marco_Wa09/0r2186av/13/

When i close the calendar via cancel-button on the left, the onClose() - hook is triggert as well as the onCancel() - hook.

Is it possible to change this behaviour? At the moment we do not know if it was closed regularly by picking a date or via cancel-button :(

hey,

can you add, that when i double click on a day, the calendar closes?

Thanks :)

Is there a way to manually type a date into the text input? I tried an older version of the component and I was able to type in the input but not with the most recent one. I don't see an option for that.

Hi @mikecoj

I hope you can help me .. I have tried to compare the date selected in MCDatepicker using the onSelect() event hook and todays date using jQuery, but so far unsuccessfully .. how can I do this? .. I have also made a post on StackOverflow without any response here : https://stackoverflow.com/questions/69653851/how-can-i-check-if-selected-date-in-mcdatepicker-is-today%c2%b4s-date

Hope you can help me :-)

Best Regards
Stig

customWeekDays and customMonths properties would throw an error when I try to use names in Korean (ko-KR) or Japanese (jp-JP).

ko-KR
['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']
['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']

jp-JP
['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日']
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

Also please provide a new property where I could set custom names for those short week names. The current solution is not correct for Chinese (zh-CN) and probably others.

How do I add an event listener that procs when a date is confirmed using the 'OK' button?

hey, i like your datepicker much.

Is it possible to accept date formats like 'DD.MM.YYYY' / 'DD.MMM.YYYY'?

I would like to use your datepicker on a german website, but all i can get is 'DD-MM-YYYY'.

Thanks in advance, Louis

#edit

^(?:(d{1,4}|m{1,4}|y{4}|y{2})?\b(?:(?:,\s)|[-.\s/]{1})?(d{1,4}|m{1,4}|y{4}|y{2})?\b(?:(?:,\s)|[.-\s/]{1})?(d{1,4}|m{1,4}|y{4}|y{2})\b(?:(?:,\s)|[.-\s/]{1})?(d{1,4}|m{1,4}|y{2}|y{4})?\b)$

this should be the correct Regex for it, allows both - and .

In windows browsers all working very well, but on Safari the calendar has some bugs. When click to change month or year the mc-picker__body not change content from days to months or years.
https://www.youtube.com/watch?v=ECe8xoqBXDo&ab_channel=%C5%81ukaszMachejek

Hey,

when i create constant of datepicker and the specified input field (el) is not in the dom tree yet, i get an error.

Is it possible to change this behaviour? We would like to use the datepicker for multiple inputs and buttons.

Or is it even possible to create a constant/picker without specifieng the input element (el)?

Or should i use hidden input fields for this?!

Would be great if you could add some examples and your opinion for this :)

Hi,

I would like to let the calendar open on date double-click.
I've set

autoClose: false

parameter but nothing change: the calendar is still closing on double-click.

The dialog stays open when other input fields in the form are selected. Is there a way to get an event when the dialog loses focus so I can close it?

In the commit "fixed default context option" (493bf00) the changes made broke shadow dom support. We're currently using this date picker in the shadow dom and the picker is now added to the global document of the page instead of the shadow dom.

The following change in src/js/render.js is the root of the issue.

-	instanceOptions.context.appendChild(calendarDiv);
+	document.body.appendChild(calendarDiv);

This change was originally intended to allow the date picker to be added to any element rather than only the document root. This would allow the picker to be used in shadow dom as well as inside iframes and other areas that aren't in the global document.

Is there a way this functionality can be reinstated?

hey, is it possible to change the sequence of the weekdays?
we start with monday in germany.