Simple Calendar and Date Picker Plugin - PickMeUp

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.