npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zebra_datepicker

v2.2.0

Published

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

Downloads

2,108

Readme

Zebra Datepicker  Tweet

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

npm Total Monthly JSDelivr License

Enhance your forms with the powerful and highly-configurable Zebra Datepicker date time picker jQuery plugin. This date time picker adds an intuitive calendar interface for selecting dates and times, complete with a convenient month and year jump feature. The selected date will be formatted and entered into the input field according to your specified options. Simply attach the plugin to your input fields and let the calendar icon do the rest.

Features

  • it is small – it weighs around 30KB minified (9.1KB gzipped) offering the best ratio of features per used bytes
  • it is both a date picker as well as a time picker
  • it's cross-browser – works in every major browser; works also in Internet Explorer 6 (as long as you are using a version of the date picker that is less than 2.0.0)!
  • 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 themes are included, one of them being for use with Twitter Bootstrap
  • offers an intuitive interface allowing for 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
  • supports RTL languages
  • works by automatically attaching a small calendar icon to the indicated input fields which displays the attached date picker when clicked.
  • it's compatible with AMD and CommonJS

Themes

🎂 Support the development of this project

Your support is greatly appreciated and it keeps me motivated continue working on open source projects. If you enjoy this project please star it by clicking on the star button at the top of the page. If you're feeling generous, you can also buy me a coffee through PayPal or become a sponsor. Thank you for your support! 🎉

Donate

Demo

See the demos

Requirements

Zebra Datepicker has no dependencies other than jQuery 1.7.0+ and requires that the page you are using the plugin on to have a strict doctype like:

<!doctype html>

Installation

Zebra Datepicker is available as a npm package. To install it use:

# the "--save" argument adds the plugin as a dependency in packages.json
npm install zebra_datepicker --save

How to use

First, load jQuery from a CDN and provide a fallback to a local source like:

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

Load the Zebra Datepicker jQuery plugin:

<script src="path/to/zebra_datepicker.min.js"></script>

Alternatively, you can load Zebra Datepicker from JSDelivr CDN like this:

<!-- for the most recent version, not recommended in production -->
<script
  src="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js"></script>

<!-- for a specific version -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zebra_datepicker.min.js"></script>

<!-- replacing "min" with "src" will serve you the non-compressed version -->

Load the style sheet file from a local source

<link rel="stylesheet" href="path/to/theme/zebra_datepicker.min.css">

...or from JSDelivr CDN

<!-- for the most recent version of the "default" theme -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css">

<!-- for the most recent version of the "bootstrap" theme -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/zebra_datepicker.min.css">

<!-- replacing "min" with "src" will serve you the non-compressed version -->

Zebra Datepicker is also available on cdnjs, one of the most famous free and public web front-end CDN services

Now, within the DOM-ready event, attach the Zebra Datepicker plugin to a <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 and 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 datepicker = $('selector').data('Zebra_DatePicker');

Configuration options

Properties

All parameters are optional.

Note that any of the properties below may also be set via data attributes. To do this you have prefix the name of the property you want to set with data-zdp_. One important thing to remember is that if the value of the property is an array you’ll have to use double quotes inside the square brackets and therefore single quotes around the attribute. See example.

Events

onChange

Callback to be executed whenever the user changes the view (days/months/years/time), as well as when the user navigates by clicking on the next/previous icons in any of the views;

The callback function receives 2 arguments

  • the current view (days, months, years or time)
  • an array containing the active elements (not disabled) from the view, as jQuery elements, allowing for easy customization and interaction with particular cells in the date picker's view

The this keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object. To get the plugin's properties do properties = this.data('Zebra_DatePicker').

For simplifying searching for particular dates, each element gets a date data attribute whose format depends on the value of the view argument as follows:

  • YYYY-MM-DD for elements in the days view
  • YYYY-MM for elements in the months view
  • YYYY for elements in the years view

Note that this data attribute is not also set for elements in the time view.

Here's how we could highlight the 24th day of each month of each year:

$('selector').Zebra_DatePicker({

    //  execute a function whenever the user changes the view
    //  (days/months/years), as well as when the user
    //  navigates by clicking on the "next"/"previous" icons
    //  in any of the views
    onChange: function(view, elements) {

        //  on the "days" view...
        if (view === 'days') {

            //  iterate through the active elements in the view
            elements.each(function() {

                //  to simplify searching for particular dates,
                //  each element gets a "date" data attribute which
                //  is the form of:
                //  - YYYY-MM-DD for elements in the "days" view
                //  - YYYY-MM for elements in the "months" view
                //  - YYYY for elements in the "years" view

                //  so, because we're on a "days" view,
                //  let's find the 24th day using a regular
                //  expression (notice that this will apply to
                //  every 24th day of every month of every year)
                if ($(this).data('date').match(/\-24$/))

                    // and highlight it!
                    $(this).css({
                        backgroundColor:    '#C40000',
                        color:              '#FFF'
                    });

            });

        }

    }

});

onClear

Callback function to be executed when the user clicks the Clear button.

The callback function takes no arguments. The this keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object. To get the plugin's properties do properties = this.data('Zebra_DatePicker').

onClose

Callback function to be executed when the date picker is closed.

The callback function takes no arguments. The this keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object. To get the plugin's properties do properties = this.data('Zebra_DatePicker').

onOpen

Callback function to be executed when the date picker is shown.

The callback function takes no arguments. The this keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object. To get the plugin's properties do properties = this.data('Zebra_DatePicker').

onSelect

Callback function to be executed when a date is selected.

The callback function takes 3 arguments:

  • the date in the format specified by the format attribute
  • the date in YYYY-MM-DD format and additionally hours, minutes and seconds if time picker is enabled
  • the date as a JavaScript Date object

this inside the callback function refers to the element the date picker is attached to, as a jQuery object. To get the plugin's properties do properties = this.data('Zebra_DatePicker').

Methods

First, get a reference to the plugin like

var datepicker = $('selector').data('Zebra_DatePicker');

Then call a method like

datepicker.update();

clear_date()

Clears the selected date (if any)

destroy()

Removes the plugin from an element

set_date(date)

Sets the value of the element the date picker is attached to, to the specified date;

The date must be in the format defined by the format property or a JavaScript Date object.

The date will not be set if it is disabled (either because of disabled_dates or because of direction properties)

show()

Shows the date picker (unless the always_visible property is set to true)

hide()

Hides the date picker (unless the always_visible property is set to true)

update([options])

Updates configuration options at run-time, and recalculates date picker's icon position relative to the parent element. You should call this method whenever you show/hide/reposition the parent element, or alter the parent element's dimensions.

The method accepts an optional argument - an object with configuration options to update:

var datepicker = $('selector').data('Zebra_DatePicker');
datepicker.update({
    direction: 1
});

If you just want to update the icon's position, simply call the method without any arguments:

var datepicker = $('selector').data('Zebra_DatePicker');
datepicker.update();

Global options

If you have multiple date pickers that share common options you can set these options like this:

// this needs to be called only once and does
// not have to be called from within a "ready" block!
$.fn.Zebra_DatePicker.defaults = {
    // any valid options
}

Any options set like this will be applied to all the newly created date picker. Obviously, options set at the creation of any new date picker would overwrite the respective defaults.

Sponsors

Cross browser/device testing is done with

BrowserStack