Giter Club home page Giter Club logo

mcdatepicker's Introduction

MCDatepicker

Framework-agnostic, highly-customizable Vanilla JavaScript datepicker with zero dependencies.

Features

  • 2 Modes: (modal, inline)
  • Dependency free
  • Custom weekday and month names
  • Disable weekdays and specific dates
  • Fully responsive/ Mobile friendly

Installation

Via NPM

npm install mc-datepicker --save

Using CDN

Include CDN links in the <head>...

<link href="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/mc-datepicker/dist/mc-calendar.min.js"></script>

Usage

<input id="datepicker" type="text">

If you’re using a bundler, e.g. webpack, you’ll need to import MCDatepicker

import MCDatepicker from 'mc-datepicker';
  1. Create a new instance, and attach it to an input field
const picker = MCDatepicker.create({
	el: '#datepicker'
});
  1. Customize the datepicker by adding more options
const picker = MCDatepicker.create({
	el: '#datepicker',
	disableWeekends: true
});
  1. Use methods to manipulate the datepicker
btn.onclick = () => picker.open();

Documentation

Online Docs

License

MIT

mcdatepicker's People

Contributors

chardin1 avatar dependabot[bot] avatar mikecoj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mcdatepicker's Issues

Theme customization

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 
});

Create Calendar timeZone/Region/Country Specific

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,

(Request) Specific Click Handling

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 :-)

[Suggestion] Implementation of optional time picker feature

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.

Is there a way to i18n this datepicker ?

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

Uncaught TypeError: Converting circular structure to JSON

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? :-)

Cannot open calendar when DOM ist removed

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>

BUG - When selecting a two digit year (i.e. 70) the calendar jumps to 1970

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 has error stopping it working completely

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

autoClose issue

Select calendar week

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.

Custom days error

Hi, it's giving me issue :
image
although I don't change allowedYears but I changed name of days.

How to fix this?

Problem with disableDates

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)]
});

error every time setFullDate is called

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

Change from blur listener to click broke form

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

Add option to change minDate/maxDate dynamically

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.

showCalendarDisplay

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.

3 issues found

#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 :-)

mc-table__body seems to fill only half of the screen on Chromium based browsers on mobile

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.
WhatsApp Image 2021-06-23 at 17 44 05

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

How to highlight selected date on the calendar?

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?

z-index

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

Allow days to be selected from next month

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.

disableDates update, bodyType fixed?

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,...

Select multiple dates (feature)

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.

Language files for localization

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.

Add setFullDate(), setDay(), setMonth() etc.

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.

[Feature Request] Adding custom headline/text to MCDatepicker

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)

image

Best Regards
Stig :-)

You may need an appropriate loader to handle this file type

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 ^^

Allow date to be typed in

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.

Custom names for weekdays and months does not work for some languages

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.

onChange event?

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

different date output format

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 .

getting errors when input is not in DOM

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 :)

How to prevent autoclose?

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.

ShadowDOM Support Broken

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.