Icontem

Zebra Date Picker: jQuery plugin to let the user pick dates

Recommend this page to a friend!
  Info   View files Documentation   Demos   View files View files (45)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-04-07 (15 days ago) RSS 2.0 feedNot enough user ratingsTotal: 108 All time: 385 This week: 8Up
Version License JavaScript version Categories
zebra-datepicker 1.9.6GNU Lesser Genera...1.0jQuery, Time and Date, Forms
Description Author

This package is a jQuery plugin to let the user pick dates.

It attaches to a given text input and will show a calendar when the user clicks on the input or the icon to pick a date.

The date selected by the user is stored in the text input in a configurable format.

The range of dates to be allowed can be restricted.

Name: Stefan Gabos <contact>
Classes: 1 package by
Country: Romania Romania
Age: 37
All time rank: 1505 in Romania Romania
Week rank: 47 Up2 in Romania Romania Up

Details

Zebra_Datepicker

A super-lightweight, highly configurable, cross-browser date picker jQuery plugin

Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Users can easily jump between months and years due to the datepicker?s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker?s options.

Features

- it is small ? it weights around 23KB minified offering the best ratio of features per used bytes - it?s compact ? unlike other datepickers, this datepicker is one-file only - it?s cross-browser ? works in every major browser; works also in Internet Explorer 6 where it uses an iFrameShim to stay above select controls - it?s compatible with AMD and CommonJS - has a default color scheme that blends-in well with almost any design, and it?s easily customizable through the well-organized CSS file; two additional themese are included, one of them being for use with <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a> - offers an intuitive interface fast and easy navigation through months and years - offers an intuitive mechanism for disabling dates and date ranges using a syntax similar to cron?s syntax - supports defining of custom weekend days for countries that don?t have the weekend on Saturday and Sunday - supports most of date formats you can think of, borrowing the syntax of PHP?s date function - supports all sorts of combinations for starting and ending dates - date pickers can be ?paired? ? where one or more date pickers will use the value of another date picker as starting date - supports internationalization - works by automatically attaching a small calendar icon to the indicated input fields which displays the attached datepicker when clicked.

Themes

Requirements

Zebra_Datepicker has no dependencies other than jQuery 1.5.2+ but requires that the page you are using the plugin on to have a strict doctype like:

<!doctype html>

How to use

Zebra_Datepicker is available as a Bower package. To install it use:

bower install zebra_datepicker

Zebra_Datepicker is also available as a npm package. To install it use:

npm install zebra_datepicker

Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>

Load the Zebra_Datepicker jQuery plugin:

<script type="text/javascript" src="path/to/zebra_datepicker.js"></script>

Load the stylesheet:

<link rel="stylesheet" href="path/to/zebra_datepicker.css" type="text/css">

Now, within the DOM-ready event, attach the Zebra_Datepicker plugin to a &lt;input type=?text?> control

$(document).ready(function() {

    // assuming the controls you want to attach the plugin to
    // have the "datepicker" class set
    $('input.datepicker').Zebra_DatePicker();

});

This will attach a calendar icon to the specified element(s). Clicking the icon, will make the date picker visible.

To get a reference to the instance of Zebra_DatePicker attached to an element do:

var $zdp = $('#element').data('Zebra_DatePicker');

Configuration options and demos on the project's homepage

  Files folder image Files  
File Role Description
Files folder imageexamples (3 files, 2 directories)
Files folder imagepublic (3 directories)
Accessible without login Plain text file .npmignore Data Auxiliary data
Accessible without login Plain text file bower.json Data Auxiliary data
Accessible without login Plain text file changelog.txt Data Documentation
Accessible without login Plain text file documentation.txt Data Documentation
Accessible without login Plain text file Gruntfile.js Aux. Auxiliary script
Accessible without login Plain text file license.txt Lic. License
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Auxiliary data
Accessible without login Plain text file readme.txt Data Documentation

  Files folder image Files  /  examples  
File Role Description
Files folder imagelibraries (1 file, 1 directory)
Files folder imagepublic (1 file, 3 directories)
  Accessible without login HTML file bootstrap.html Doc. Documentation
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login HTML file metallic.html Doc. Documentation

  Files folder image Files  /  examples  /  libraries  
File Role Description
Files folder imagesyntaxhighlighter (3 files, 1 directory)
  Accessible without login HTML file index.html Doc. Documentation

  Files folder image Files  /  examples  /  libraries  /  syntaxhighlighter  
File Role Description
Files folder imagepublic (1 file, 2 directories)
  Accessible without login Plain text file GPL-LICENSE Data Auxiliary data
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file MIT-LICENSE Data Auxiliary data

  Files folder image Files  /  examples  /  libraries  /  syntaxhighlighter  /  public  
File Role Description
Files folder imagecss (2 files)
Files folder imagejavascript (6 files)
  Accessible without login HTML file index.html Doc. Documentation

  Files folder image Files  /  examples  /  libraries  /  syntaxhighlighter  /  public  /  css  
File Role Description
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file shCoreDefault.css Data Auxiliary data

  Files folder image Files  /  examples  /  libraries  /  syntaxhighlighter  /  public  /  javascript  
File Role Description
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file shBrushJScript.js Aux. Auxiliary script
  Accessible without login Plain text file shBrushXml.js Aux. Auxiliary script
  Accessible without login Plain text file shCore.js Aux. Auxiliary script
  Accessible without login Plain text file shLegacy.js Aux. Auxiliary script
  Accessible without login Plain text file XRegExp.js Aux. Auxiliary script

  Files folder image Files  /  examples  /  public  
File Role Description
Files folder imagecss (3 files)
Files folder imageimages (1 file)
Files folder imagejavascript (3 files)
  Accessible without login HTML file index.html Data Auxiliary data

  Files folder image Files  /  examples  /  public  /  css  
File Role Description
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file reset.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  examples  /  public  /  images  
File Role Description
  Accessible without login Image file close.png Icon Icon image

  Files folder image Files  /  examples  /  public  /  javascript  
File Role Description
  Accessible without login Plain text file core.js Example Example script
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file jquery-1.12.0.js Aux. Auxiliary script

  Files folder image Files  /  public  
File Role Description
Files folder imagecss (3 files)
Files folder imageimages (3 files, 1 directory)
Files folder imagejavascript (2 files)

  Files folder image Files  /  public  /  css  
File Role Description
  Accessible without login Plain text file bootstrap.css Data Auxiliary data
  Accessible without login Plain text file default.css Data Auxiliary data
  Accessible without login Plain text file metallic.css Data Auxiliary data

  Files folder image Files  /  public  /  images  
File Role Description
Files folder imagemetallic (4 files)
  Accessible without login Image file calendar-disabled.png Icon Icon image
  Accessible without login Image file calendar.png Icon Icon image
  Accessible without login Image file themes.png Data Auxiliary data

  Files folder image Files  /  public  /  images  /  metallic  
File Role Description
  Accessible without login Image file default-date.png Icon Icon image
  Accessible without login Image file disabled-date.png Icon Icon image
  Accessible without login Image file header.png Icon Icon image
  Accessible without login Image file selected-date.png Icon Icon image

  Files folder image Files  /  public  /  javascript  
File Role Description
  Plain text file zebra_datepicker.js Class Class source
  Plain text file zebra_datepicker.src.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:108
This week:0
All time:385
This week:8Up