schuka-kirill / pickmeup Goto Github PK

Really simple, powerful and customizable datepicker.

Author - Nazar Mokrynskyi

Based on DatePicker by Stefan Petre

Browser support:

• IE 10+
• Opera 12.1+
• Latest versions of Firefox and Chrome

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

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

Then you can apply datepicker to any element:

$('.date').pickmeup();

Global default settings are stored in $.pickmeup

They can be redefined during initialization:

$('.date').pickmeup({
	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, replace pickmeup with pickmeup_twitter_bootstrap in 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, replace pickmeup with pickmeup_uikit in initialization:

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

All options and events are the same.

this in any callback will be the same element, on which pickmeup() was called. Events are specified as regular options:

Triggered on day element rendering, accepts date as argument and may return object with next properties:

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

Triggered at date change, accepts formatted date as argument

Triggered before showing

Triggered at showing, if not true returned - datepicker will not be shown

Triggered at hiding, if not true returned - datepicker will not be hidden

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

Methods allows external control on datepicker

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

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

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

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

$('.date').pickmeup('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

$('.date').pickmeup('set_date', date);

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

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

Is useful, for example, after input field change

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

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

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

Current options (for whatever reason) can be accessed as $('...').data('pickmeup-options').

Root pickmeup element (jQuery collection object) can be accessed as $('...').get(0).pickmeup or directly this.pickmeup if inside callback.

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/z4fmvuzb

MIT License, see license.txt