Simple Calendar and Date Picker Plugin - PickMeUp

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: '&#9664;',
  next: '&#9654;',
  // 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. Include the jQuery PickMeUp CSS file on your web page.

<link rel="stylesheet" href="css/pickmeup.css" type="text/css" />

2. Create an data picker input or a container for the data picker.

<input type="text" value="17-11-2013">
<div class="demo"></div>

3. Include the jQuery library and jQuery PickMeUp plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pickmeup.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

4. Initialize the data picker/calendar with options.

$(function () {
$('.demo').pickmeup({
flat: true
});
var input= $('input');
input.pickmeup({
position: 'right',
before_show: function(){
input.pickmeup('set_date', input.val(), true);
},
change: function(formated){
input.val(formated);
}
});
});

5. Available options.

$(function () {
$('.demo').pickmeup({
date: new Date, // Selected date after initialization. Can be single date string/object or array depending on selection mode
flat: false, // Whatever if the date picker is appended to the element or triggered by an event
first_day: 1, // First day of week: 0 - Sunday, 1 - Monday
prev: '&#9664;', // Previous button content
next: '&#9654;', // Next button content
mode: 'single', // Date selection mode. single/multiple/range
view: 'days', // View mode after initialization. days/months/years
calendars: 1, // Number of calendars, that will be rendered
format: 'd-m-Y', // Date format
position: 'bottom', // Date picker's position relative to the triggered element
trigger_event: 'click', // Event to trigger the date picker
class_name: '', // Class to be added to root datepicker element
render: function () {},
change: function () {return true;},
before_show: function () {return true;},
show: function () {return true;},
hide: function () {return true;},
locale: { // Object, that contains localized days of week names and months
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
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"]
}
});
});

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.

  • Publication date: 10.06.2019
  • Source