Simple Calendar and Date Picker Plugin - PickMeUp
File Size: | 59.6 KB |
---|---|
Views Total: | 58383 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PickMeUp is yet another jQuery Vanilla JavaScript plugin for creating a customizable date picker embedded within an input filed that will pop up when the input is focused.
The plugin also has the ability to create a calendar widget on your web page, with date range, calendar event and multi-date selection support.
Note that the PickMeUp v3+ has removed jQuery dependency. So the plugin currently works as a standlone JavaScript library.
How to use it (Latest Version):
1. Download and include the PickMeUp's JavaScript & CSS files on the webpage.
<link rel="stylesheet" href="css/pickmeup.css"> <script src="js/pickmeup.js"></script>
2. Initialize the plugin on an input field and done.
<input type="text" value="06-09-2019">
pickmeup('input', { hide_on_select: true });
3. You can also attach the function to a DIV element that allows the user to select a date from the calendar.
<div class="example"></div>
pickmeup('.example');
4. Possible options to config the date picker.
pickmeup('.example',{ // date in the center of rendered calenda // number/object/string current: null, // selected date date: new Date, // default date // sets to false to leave empty default_date: new Date, // appends the date picker to an element or triggers by an event flat: false, // the first day // 0 - Sunday, 1 - Monday first_day : 1, // prev/next symbols prev: '◀', next: '▶', // single/multiple/range mode: 'single', // enables/disables year/month/day selection select_year: true, select_month: true, select_day: true, // days/months/years view: 'days', // the number of calendars to render calendars: 1, // date format format: 'd-m-Y', // title format title_format: 'B, Y', // top/right/bottom/left/function position : 'bottom', // additional class(es) class_name: '', // custom separator separator: ' - ', // hides the date picker after selection hide_on_select: false, // min/max dates // number/object/string min: null, max: null, // executed for each day element rendering, takes date argument, allows to select, disable or add class to element render: function () {}, // current local locale: 'en', // local strings 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'] } } });
5. API methods.
// Hide the date picker instance.hide(); // Show the date picker instance.show(); // Goto the Prev date instance.prev(); // Goto the Next date instance.next(); // Get the selected date instance.get_date(formatted); // Set the date instance.set_date(new Date); // Clear the selection instance.clear(); // Update the date picker instance.update(); // Destroy the date picker instance.destroy();
6. Available event handlers.
instance.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 }) instance.addEventListener('pickmeup-show', function (e) { e.preventDefault(); // Showing can be canceled if needed }) instance.addEventListener('pickmeup-hide', function (e) { e.preventDefault(); // Hiding can be canceled if needed }) instance.addEventListener('pickmeup-fill', function (e) { // Do stuff here })
How to use it (jQuery Version):
1. PickMeUp works with the popular Bootstrap and UIKit framework so it also can be used as a jQuery plugin. To get started, load the corresponding jQuery plugin in your project.
<-- For Bootstrap --> <script src="js/jquery.pickmeup.twitter-bootstrap.js"></script> <-- For UIKit --> <script src="js/jquery.pickmeup.uikit.js"></script>
2. Create an data picker input or a container for the data picker.
<input type="text" value="06-09-2019">
3. Initialize the date picker/calendar with options.
$('input').pickmeup_twitter_bootstrap({ // options here }); $('input').pickmeup_uikit({ // options here });
Changelog:
v3.0.0+ (2019-06-10)
- Rewrite the plugin and remove the jQuery dependency.
- Doc updated.
v2.5.1 (2014-09-08)
- Single mode check if options.date is array (take first element of array)
v2.5.0 (2014-08-24)
- Fix for The month before min date should not display
- Events namespacing
- Touch support (trigger_event option defaults to click touchstart)
- Destroy method
- Current date highlighting in range mode
- New option select_day (also select_month no longer depends on select_year)
- Account min/max options in months and years views
- Huge refactoring and fixes for various found small bugs
- Fix for pmu-{next || prev} clicktarget unreachable with icon
v2.4.3 (2014-08-03)
- Fix for broken date parsing in last version
v2.4.2 (2014-07-16)
- More correct fix for NaN instead of dates and months names when wrong data placed in input field
v2.4.0 (2014-07-01)
- Add methods prev/next for external call
v2.3.1 (2014-06-29)
- Hide previous/next buttons when necessary if min/max options specified
v2.2.3 (2014-01-18)
- bugs fixed.
v2.2.1 (2014-01-09)
- Small fix with events
v2.0.1 (2013-11-21)
- Small fix with events
This awesome jQuery plugin is developed by nazar-pc. For more Advanced Usages, please check the demo page or visit the official website.