Simple jQuery Calendar and Date Picker Plugin - PickMeUp

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

PickMeUp is yet another jQuery plugin for creating a customizable date picker embedded within an input filed that will popup 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.

Basic Usage:

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"]
}
});
});

Change log:

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.