I have created this library library many years ago and didn't update it in last few years due to not working with frontend anymore.

With that I decided to archive the project.

If you'd like to step in maintaining and modernize the project with the original vision in mind, please reach out via email.

No dependencies, single/range/multiple selections, ability to put custom content into dates, very flexible styling and customization abilities.

Written and maintained by Nazar Mokrynskyi with the help of awesome contributors

Based on DatePicker by Stefan Petre

Browser support:

• IE 10+
• 2 latest stable versions of Firefox, Chromium, Opera and Edge

If you find this project useful, consider supporting its development on patreon.com/nazarpc, this would help me a lot!

Or if you are representing a company, here is Faircode page.

You need only 2 files: dist/pickmeup.min.js and css/pickmeup.css.

The plugin can also be loaded as AMD or CommonJS module.

Then you can apply datepicker to any element:

pickmeup('.date');

Global default options are stored in pickmeup.defaults

They can be redefined during initialization:

pickmeup('.date', {
	format	: 'Y-m-d'
});

or with data-attributes with pmu- prefix:

<div class="date" data-pmu-format="Y-m-d"></div>

For Twitter Bootstrap integration you do not need to include style file, but you need to include jquery.pickmeup.twitter-bootstrap.js instead, that will read settings of current Bootstrap theme and apply them to PickMeUp, so that it will look similar to native Bootstrap elements.

To apply integrated version use $(...).pickmeup_twitter_bootstrap() plugin for initialization:

$('.date').pickmeup_twitter_bootstrap();

All options and events are the same.

For UIkit integration you do not need to include style file, but you need to include jquery.pickmeup.uikit.js instead, that will read settings of current UIkit theme and apply them to PickMeUp, so that it will look similar to native UIkit elements.

To apply integrated version use $(...).pickmeup_uikit() plugin for initialization:

$('.date').pickmeup_uikit();

All options and events are the same.

render options might return object with any of following keys:

• selected: if true - date will be selected
• disabled: if true - date will be disabled
• class_name: will be added to class of day element

Example:

var now = new Date;
pickmeup(element, {
    render : function (date) {
        if (date < now) {
            return {disabled : true, class_name : 'date-in-past'};
        }
        return {};
    } 
})

In PickMeUp events are native DOM events fired on element when pickmeup() was called and always have pickmeup- prefix.

Triggered at date change. Example:

pickmeup(element);
element.addEventListener('pickmeup-change', function (e) {
    console.log(e.detail.formatted_date); // New date according to current format
    console.log(e.detail.date);           // New date as Date object
})

Triggered at showing. Example:

pickmeup(element);
element.addEventListener('pickmeup-show', function (e) {
    e.preventDefault(); // Showing can be canceled if needed
})

Triggered at hiding. Example:

pickmeup(element);
element.addEventListener('pickmeup-hide', function (e) {
    e.preventDefault(); // Hiding can be canceled if needed
})

Triggered after filling of PickMeUp container with new markup of days, months, years. May be needed for inner datepicker markup editing.

pickmeup(element);
element.addEventListener('pickmeup-fill', function (e) {
    // Do stuff here
})

Methods allows external control on datepicker

pickmeup('.date').hide();

pickmeup('.date').show();

pickmeup('.date').prev();

pickmeup('.date').next();

pickmeup('.date').get_date(formatted);

formatted - boolean or string (default false)

• false - Date object
• true - string formatted in accordance with format option
• string is used to specify custom format instead if given during initialization

pickmeup('.date').set_date(new Date);

date - can be single date string/object or array depending on selection mode

pickmeup('.date').clear();

pickmeup('.date').update();

Destroys PickMeUp instance, removes created markup, restores everything that was changed to original state.

pickmeup('.date').destroy();

You can add locales to global defaults and then use different locales in particular instance with locale option. Sample object for English language (no need to add, already included in source code):

pickmeup.defaults.locales['en'] = {
	days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
	daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
	daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
	months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
	monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

Russian:

pickmeup.defaults.locales['ru'] = {
	days: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
	daysShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
	daysMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
	months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
	monthsShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек']
};

Current options (for whatever reason) can be accessed as element.__pickmeup.options.

Root pickmeup element can be accessed as element.__pickmeup.element.

If you want other colors - just change several variables in scss file.

To change size - adjust font-size for root datepicker element, everything will scale nicely.

Feel free to create issues and send pull requests, they are highly appreciated!

Before reporting an issue, be so kind to prepare reproducible example on jsfiddle.net, please.

You can start with working demo of latest stable version of PickMeUp: jsfiddle.net/0kg5jL3p

Zero-Clause BSD

https://opensource.org/licenses/0BSD

https://tldrlegal.com/license/bsd-0-clause-license