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

Overview

zebrajs

Zebra Datepicker  Tweet

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

npm Total Monthly JSDelivr License

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

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!
  • 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 means a lot and it keeps me motivated to keep working on open source projects.
If you like this project please it by clicking on the star button at the top of the page.
If you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.
Either way - Thank you! 🎉

Star it on GitHub 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

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

# the "--save" argument adds the plugin as a dependency in bower.json
bower 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.

Property Type Default Description
always_visible mixed false Should the date picker be always visible?
Setting this property to a jQuery element will result in the date picker being always visible, the indicated element acting as the date picker's container;

Setting this property to boolean true will result in the date picker not closing when selecting a date but only when the user clicks outside the date picker.
container jQuery $('body') By default, the date picker is injected into the document's <body> element; use this property to tell the library to inject the date picker into a custom element - useful when you want the date picker to open at a specific position.
current_date mixed false By default, the current date (the value of Today) is taken from the system where the date picker is run on.
Set this to a date in the format of YYYY-MM-DD to use a different date.
custom_classes Array false Dates that should have custom classes applied to them.
An object in the form of

{
'myclass1': [dates_to_apply_the_custom_class_to],
'myclass2': [dates_to_apply_the_custom_class_to]
}

...where dates_to_apply_the_custom_class_to is an array of dates in the same format as required for the disabled_dates property.

Custom classes will be applied only in the day picker view and not on month/year views! Also note that the class name will have the "_disabled" suffix added if the day the class is applied to is disabled.

In order for the styles in your custom classes to be applied, make sure you are using the following syntax:

.Zebra_DatePicker .dp_daypicker td.myclass1 { .. }
.Zebra_DatePicker .dp_daypicker td.myclass1_disabled { .. }
days Array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Days of the week, Sunday to Saturday.
days_abbr mixed false Abbreviated names of days.

By default, the abbreviated name of a day consists of the first 2 letters from the day's full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the 7 days of the week; leave it false to use the first 2 letters of a day's name as the abbreviation.
default_position string 'above' The position of the date picker relative to the element it is attached to.

Note that, regardless of this setting, the date picker's position will be automatically adjusted to fit in the view port, if needed.

Possible values are above and below.

This property will be ignored if always_visible or container properties are set!
direction mixed 0 Direction of the calendar

  • n (a positive integer) creates a future-only calendar beginning at n days after the reference date1
  • -n (a negative integer) creates a past-only calendar ending n days before the reference date
  • 0 creates a calendar with no restrictions
  • boolean true creates a future-only calendar starting with the reference date
  • boolean false for a past-only calendar ending on the reference date
You may also set this property to an array with two elements in the following combinations:

  • first item is boolean true (calendar starts on the reference date), a positive integer (calendar starts n days after the reference date), or a valid date given in the format defined by the format attribute (calendar starts at the specified date), and the second item is boolean false (the calendar has no ending date), a positive integer (calendar ends n days after the starting date), or a valid date given in the format defined by the format attribute and which occurs after the starting date (calendar ends at the specified date)

  • first item is boolean false (calendar ends on the reference date), a negative integer (calendar ends n days before the reference date), or a valid date given in the format defined by the format attribute (calendar ends at the specified date), and the second item is a positive integer (calendar ends n days before the ending date), or a valid date given in the format defined by the format attribute and which occurs before the starting date (calendar starts at the specified date)
Examples:

[1, 7] calendar starts tomorrow and ends seven days after that
[true, 7] calendar starts on the reference date and ends seven days after that
['2013-01-01', false] calendar starts on January 1st 2013 and has no ending date ("format" is YYYY-MM-DD)
[false, '2012-01-01'] calendar ends on the reference date and starts on January 1st 2012 ("format" is YYYY-MM-DD)

Note that disabled_dates property will still apply!

The reference date is the current date unless the date picker is the pair of another date picker, case in which the reference date is the date selected in that date picker.
disable_time_picker boolean false By default, setting a format that also involves time (h, H, g, G, i, s, a, A) will automatically enable the time picker. If you want to use a format that involves time but you don't want the time picker, set this property to true.
disabled_dates mixed false
no disabled dates
An array of disabled dates in the following format: 'day month year weekday' where weekday is optional and can be 0-6 (Saturday to Sunday).

The syntax is similar to cron's syntax: the values are separated by spaces and may contain * (asterisk) - (dash) and , (comma) delimiters.

Examples:

['1 1 2012'] would disable January 1, 2012
['* 1 2012'] would disable all days in January 2012
['1-10 1 2012'] would disable January 1 through 10 in 2012
['1,10 1 2012'] would disable January 1 and 10 in 2012
['1-10,20,22,24 1-3 *'] would disable 1 through 10, plus the 22nd and 24th of January through March for every year
['* * * 0,6'] would disable all Saturdays and Sundays
['01 07 2012', '02 07 2012', '* 08 2012'] would disable 1st and 2nd of July 2012, and all of August of 2012

DISABLING ALL DATES AND NOT SPECIFYING AT LEAST ONE ENABLED DATE WILL SEND THE SCRIPT INTO AN INFINITE LOOP SEARCHING FOR AN ENABLED DATE TO DISPLAY!
enabled_ampm mixed false
both am/pm are selectable
An array of selectable am/pm.

Allowed values are ['am'], ['pm'], or ['am', 'pm'].

Applies only when format contains A or a. Note that even when only one is enabled, onChange() will still be triggered when clicking the up/down buttons next to AM/PM on the timepicker.
enabled_dates mixed false
all dates enabled
An array of enabled dates in the same format as required for disabled_dates property. To be used together with the disabled_dates property by first setting the disabled_dates property to something like [* * * *] (which will disable everything) and the setting the enabled_dates property to, say, [* * * 0,6] to enable just weekends.
enabled_hours mixed false
all hours are selectable
An array of selectable hours.

Applies only when format contains one of the following characters: H, G, h, g. Valid values are between 0-24 (not padded with 0!) when format contains H or G characters, and between 1-12 (not padded with 0!) when format contains h or g characters.
enabled_minutes mixed false
all minutes are selectable
An array of selectable minutes.

Applies only when format contains the i character. Valid values are between 0-59 (not padded with 0!)
enabled_seconds mixed false
all seconds are selectable
An array of selectable seconds.

Applies only when format contains the s character. Valid values are between 0-59 (not padded with 0!)
fast_navigation boolean true Allows users to quickly navigate through months and years by clicking on the date picker's top label.
first_day_of_week integer 1
Monday
Week's starting day.
Valid values are 0 to 6, Sunday to Saturday.
format string 'Y-m-d' Format of the returned date.

Accepts the following characters for date formatting: d, D, j, l, N, w, S, F, m, M, n, Y, y, h, H, g, G, i, s, a, A, borrowing the syntax from PHP's date function.

If format property contains time-related characters (g, G, h, H, i, s, a, A), the time picker will be automatically enabled.

If you want to use a format that involves time but you don't want the time picker, set the disable_time_picker property to true.
Note that when setting a date format without days (d, j), the users will be able to select only years and months, and when setting a format without months and days (F, m, M, n, t, d, j), the users will be able to select only years. Similarly, setting a format that contains only time-related characters, will result in users being able to only select time.

Setting a time format containing a or A (12-hour format) but using H or G as the hour's format will result in the hour's format being automatically changed to h or g, respectively.
Also note that the value of the view property may be overridden if it is the case (i.e. a value of days for the view property makes no sense if the date format doesn't allow the selection of days).
header_captions object header_captions: {
days: 'F, Y',
months: 'Y',
years: 'Y1 - Y2'
}
Captions in the date picker's header, for the 3 applicable views: days, months, years

For each of the 3 views the following special characters may be used borrowing from PHP's date function's syntax: m, n, F, M, y and Y; any of these will be replaced at runtime with the appropriate date fragment, depending on the currently viewed date.

Two more special characters are also available Y1 and Y2 (upper case representing years with 4 digits, lowercase representing years with 2 digits) which represent currently selected year - 7 and currently selected year + 4 and which are used only in the years view.

Even though any of these special characters may be used in any of the 3 views, you should use m, n, F, M for the days view and y, Y, Y1, Y2, y1, y2 for the months and years view or you may get unexpected results!

Text and HTML can also be used, and will be rendered as it is, as in the example below (the library is smart enough to not replace special characters when used in words or HTML tags):

header_captions: {
    days: 'Departure:<br>F, Y',
    months: 'Departure:<br>Y',
    years: 'Departure:<br>Y1 - Y2'
}

icon_margin mixed false The left and right white-space around the icon

If the inside property is set to true then the target element's padding will be altered so that the element's left or right padding (depending on the value of icon_position) will be 2 x icon_margin plus the icon's width.

If the inside property is set to false, then this will be the distance between the element and the icon.

Leave it to false to use the element's existing padding
icon_position string 'right' Icon's position.
Accepted values are left and right
inside boolean true Should the icon for opening the date picker be inside the element?

If set to false, the icon will be placed to the right of the parent element, while if set to true it will be placed to the right of the parent element, but inside the element itself
lang_clear_date string 'Clear' the caption for the Clear button.
months array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], Month names
months_abbr mixed false Abbreviated names of months.

By default, the abbreviated name of a month consists of the first 3 letters from the month's full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the months of the year; leave it false to use the first 3 letters of a month's name as the abbreviation.
navigation Array navigation: ['&#9664;', '&#9654;', '&#9650;', '&#9660;'] HTML to be used for the previous/next and up/down buttons, in that order.
offset array [5, -5] The offset, in pixels (x, y), to shift the date picker's position relative to the top-right of the icon that toggles the date picker or, if the icon is disabled, relative to the top-right corner of the element the plugin is attached to.

Note that this only applies if the position of the calendar, relative to the browser's viewport, doesn't require the date picker to be placed automatically so that it is visible!
open_icon_only boolean false When set to true, the date picker will show only when users click on the associated icon, and not also when clicking the associated element.
open_on_focus boolean false Set this property to true if you want the date picker to be shown when the parent element (if open_icon_only is not set to false) or the associated calendar icon (if show_icon is not set to false) receive focus.
pair object false
not paired with another date picker
If set as one or more jQuery elements with Zebra Datepicker attached, those particular date pickers will use the current date picker's value as starting date

Note that the rules set in the direction property will still apply but the reference date will not be the current system date but the value selected in the current date picker.

Use this property only on the date picker containing the "starting date" and not also on the one with the "ending date", or the direction property of the second date picker will not work as expected!
readonly_element boolean true Should the element the calendar is attached to, be read-only?

If set to true, a date can be set only through the date picker and cannot be entered manually.
rtl boolean false Whether text should be drawn from right to left.
select_other_months boolean false Should days from previous and/or next month be selectable when visible?

Note that if the value of this property is set to true, the value of show_other_months will be considered true regardless of the actual value!
show_clear_date mixed 0 Should the Clear date button be visible?

Accepted values are:

  • 0 - the button for clearing a previously selected date is shown only if a previously selected date already exists; this means that if there's no date selected, this button will not be visible; once the user picked a date and opens the date picker again, this time the button will be visible.
  • true will make the button visible all the time
  • false will disable the button
show_icon mixed Pick a date Should a calendar icon be added to the elements the plugin is attached to?

Set this property's value to boolean false if you don't want the calendar icon.

Note that the text is not visible by default since text-indentation is set to a big negative value in the CSS, so you might want to change that in case you want to make the text visible.

When not set to boolean false the plugin will attach a calendar icon to the elements the plugin is attached to.
show_other_months boolean true Should days from previous and/or next month be visible?
show_select_today mixed 'Today' Should the Today button be visible?

Setting this property to anything but a boolean false will enable the button and will use the property's value as caption for the button. Setting it to false will disable the button.
show_week_number mixed false Should the ISO 8601 week number be displayed?

Anything other than false will enable this feature, and use the given value as column title. For example, show_week_number: 'Wk' would enable this feature and have Wk as the column's title.
start_date mixed false A default date to start the date picker with

Must be specified in the format defined by the format property, or as a JavaScript Date object

If you have a date format that contains time and you need to set a default time but the date should be the current date, here's one way of doing it:

Prior to version 1.9.11:

var date = new Date(); // have this somewhere

// set the start_date property like
start_date: date.getFullYear() + '-' +
  (date.getMonth() + 1 < 10 ? '0' : '') +
  (date.getMonth() + 1) + '-' +
  (date.getDate() < 10 ? '0' : date.getDate()) +
  ' 12:00'

Starting with version 1.9.11:

start_date: new Date()

Note that this value is used only if there is no value in the field the date picker is attached to!
The property's value can be a JavaScript Date object since version 1.9.11
strict boolean false Should default values, in the input field the date picker is attached to, be deleted if they are not valid according to direction and/or disabled_dates?
view string 'days' How should the date picker start:

Valid values are days, months, years and time.

Note that the date picker is always cycling days -> months -> years when clicking in the date picker's header, and years -> months -> days when selecting dates (skipping the views that are missing because of the date's format)

The value of the view property may be overridden if the date's format requires so! (i.e. days for the view property makes no sense if the date format doesn't allow the selection of days)
weekend_days Array [0, 6]
Saturday and Sunday
Days of the week that are considered weekend days
Valid values are 0 to 6, Sunday to Saturday.
zero_pad boolean false Should day numbers < 10 be padded with zero?
When set to true, day numbers < 10 will be prefixed with 0.

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.

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.

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.

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.

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

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)

The method's argument can be a JavaScript Date object since version 1.9.11

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

Comments
  • Degraded performance on v1.9.8 on mobile devices

    Degraded performance on v1.9.8 on mobile devices

    Tested using v1.9.8 on latest Chrome on Android.

    Steps:

    1. Open a datepicker by tapping the parent text box
    2. Close the datepicker by tapping elsewhere on the page
    3. Drag the page a little
    4. Repeat

    The datepicker will come to a point where it takes a few seconds to open upon tapping on the parent text box. Expectation is that it should open immediately.

    Such performance degradation do not happen on v1.9.7.

    opened by chenghong 13
  • Infinite loop when no enabled dates in current year

    Infinite loop when no enabled dates in current year

    We found an issue whereby is_disabled was always returning true, resulting in an infinite loop and hanging our site. It is only caused when there are no enabled dates left in the current year, and the only enabled days are in January of the next month before the current day number (so in our case, only December 31st was affected).

    We are using v1.9.0 and the resolution was to add the following code after line 772 (after "first_selectable_month = 11;"):

    first_selectable_day = new Date(first_selectable_year, first_selectable_month + 1, 0).getDate();

    and also this code after line 781 ("first_selectable_month = 0;"):

    first_selectable_day = 1;

    I believe the latest version (v1.9.17) is still affected but that's minified so I can't tell you how to change that, sorry.

    Hope that helps someone out.

    opened by b4tch 11
  • Allow customization of button text in icon

    Allow customization of button text in icon

    For localization purposes I need to be able to customize the text of the button in the Zebra_DatePicker_Icon.

    https://github.com/stefangabos/Zebra_Datepicker/blame/72ac8a09105909deed9d68dda9d6172eedbeb6e0/src/zebra_datepicker.src.js#L1220

    The names of the days and months can already be overwritten.

    opened by atesca09 10
  • Date formats using ICU standards

    Date formats using ICU standards

    Hi,

    Are you able to add the ICU standards for the dateformat ? The issue is that when you come from other languages that uses them they don't lineup.

    This would be great!

    Thanks

    opened by Yamakasi 10
  • TypeError: this.split is not a function

    TypeError: this.split is not a function

    When trying to update the datepicker with disabled dates and a custom class there is an exception thrown:

    node.data('Zebra_DatePicker').update({ disabled_dates : disabledDates, custom_classes : { 'custom' : [ disabledDates ] } });

    TypeError: this.split is not a function[Learn More] zebra_datepicker.min.js:1:2189

    opened by tonprince 10
  • mobile problem with viewport

    mobile problem with viewport

    on small screens (iphone portrait or landscape) the picker is half moved out of the viewport and partlx invisible.

    If you try to drag it in - and intuitively touch outside of the calender to drag it, its closed. (This is also in your examples)

    Is there a way for having it always inside of the viewport?

    opened by tbba 9
  • Browser freezes on Firefox and Safari for very specific enabled dates

    Browser freezes on Firefox and Safari for very specific enabled dates

    Hi,

    There is something very strange happening when I set the enabled_dates config in a very special case. This is an example of configuration that makes Safari and Firefox freezes. This problem never happens in Chrome.

    Here is some examples of configs that freezes the browser:

    // Example 1
    enabled_dates: ["15 10 2017"]
    
    // Example 2
    enabled_dates: ["15 10 2017", "29 10 2017"]
    

    Apparently, when some date between day 15 and 30 October is enabled, browser freezes.

    But, if you enable any date between 1 and 14, browser does not freeze. Even if you use the same enabled dates before. Here is some examples that does not freeze the browser.

    // Example 1
    enabled_dates: ["15 10 2017", "14 10 2017"]
    
    // Example 2
    enabled_dates: ["5 10 2017"]
    

    Other months also works properly:

    // Example 3
    enabled_dates: ["15 9 2017"]
    

    As you can see, it appears to be specific for the month of October, when you don't have enabled dates before or equal to 14 and after 1.

    I tried to figure out the problem, but I couldn't. Maybe some brilliant mind who is familiarized with the project can figure out the problem. 🙏

    Thanks,

    opened by edison 9
  • Direction doesn't work properly

    Direction doesn't work properly

    Maybe it is a bug:

    I want a pair of start date and end date. In start date I want the datepicker allow past dates but no future dates and in end date I want the picker allow past dates after start date selected e not allow more future that today.

    I'm trying it in this way:

    $('.start').Zebra_DatePicker({direction:false, pair:$('.end')});
    $('.end').Zebra_DatePicker({direction:false, pair:$('.start')});
    

    But this doesn't work, start date works nice, but the end date no...

    Can you help?

    opened by nunowar 9
  • How to trigger Zebra Datepicker with click on other element?

    How to trigger Zebra Datepicker with click on other element?

    First I tried the jquery way, which did not work:

    $('#datepickbtn').click(function() {
        $('input#datepicker').trigger('click');
    });
    

    Then I used the plugin's methods:

    $('#datepickbtn').click(function() {
        var datepicker = $('input#datepicker').data('Zebra_DatePicker');
        datepicker.show();
    });
    

    This seems to work, however, if the user clicks again on the button #datepickbtn the datepicker does not hide again. What is the proper way to check if it is visible, there seems to be no property.

    Thank you.

    PS: Implemented here: http://www.echteinfach.tv/ferien/ (click on button "Kalender").

    opened by echteinfachtv 8
  • Too much JS errors

    Too much JS errors

    Please, please, please use JSLint!

    I'm not saying about terrifying code-style, but forgetting ';', using '==' instead of '===' may be dangerous.

    So, there are too much of some stuff like that. Check your code, please!

    opened by norlin 8
  • Only allow current month selection

    Only allow current month selection

    I don't seem to understand the direction property properly, I want the direction to ONLY allow dates in the current month. When I hardcode the direction with direction: ['01-Nov-2022', '30-Nov-2022'] it works but when these same values are coming from variables, then it doesn't work

    var today = new Date();
    var year = today.getFullYear();
    const month = today.toLocaleString('default', { month: 'short' });
    var begDate = "'01" + '-' + month + '-' + year + "'";
    var lastDayOfMonth = new Date(year, today.getMonth() + 1, 0);
    var lastDay = "'" + lastDayOfMonth.getDate() + '-' + month + '-' + year + "'";
    console.log("direction: [" + begDate +',' + lastDay+ "]")
    $('.datepicker').Zebra_DatePicker({
                    direction: [begDate, lastDay],
                    format: 'd-M-Y'
    });
    

    the direction has to be dynamic for every month so it cannot be hard coded. How should this be approached?

    opened by baffourt 7
  • Fix jQuery 3+ warnings

    Fix jQuery 3+ warnings

    When using datepicker with jQuery 3+, jquery-migrate prints several warnings about deprecations in the code:

    • JQMIGRATE: jQuery.fn.removeAttr no longer sets boolean properties: readonly (src) Possible solution: replace $element.removeAttr('readonly'); with $element.prop('readonly', false); (src)
    • JQMIGRATE: jQuery.isArray is deprecated; use Array.isArray (29 occurrences, like this) Possible solution: replace all $.isArray with Array.isArray (src)
    • JQMIGRATE: jQuery.trim is deprecated; use String.prototype.trim (5 occurrences, like) Possible solution: replace all $.trim with text.trim() or String.prototype.trim.call( text == null ? '' : text ) (src)
    • JQMIGRATE: jQuery.fn.mousedown() event shorthand is deprecated (src) Possible solution: replace el.mousedown(function() {...}) with el.on('mousedown', function() {...}) (src)

    Thanks in advance!

    enhancement 
    opened by stefankiv 4
  • Can't change time dynamically

    Can't change time dynamically

    Hi :)

    I tried now for hours to change the time according to a selected day (opening hours: Monday-Thursday: 8am-4:30pm, Friday: 8am-2:30pm), but I'm not able to. First I tried the onChange Event with selecting the "time" view, but there I have not the day which I had selected before (or am I missing something?). Now I made a hack around it, but I'm not happy with this. I use the onChange Event now with selecting the "days" view and override all day click events (which is the problem) to change the time range with the update function. But when I select the day my click function triggers correctly, but the view does not change to "time" (because of overriding the click event of Zebra_Datepicker) and i have to click again on the day (or another, doesn't matter then)

    Here is my code:

    $('#id_begin').Zebra_DatePicker({
      format: 'Y-m-d H:i',
      enabled_hours: enabled_hours,
      enabled_minutes: [0, 15, 30, 45],
      days: days,
      months: months,
      start_date: date,
      show_select_today: false,
      open_on_focus: true,
      direction: 7,
      pair: $('#id_end'),
      onChange: function(view, elements) {
        if(view === "days"){
          elements.each(function() {
            $(this).click(function() {
              date = new Date($(this).data('date'))
              day = date.getDay()
              console.log(day)
              // if Monday to Thursday
              if(day >= 1 && day <= 4){
                enabled_hours = [];
                for(let i = 8; i <= 16; i++){
                  enabled_hours.push(i);
                }
                $("#id_begin").data('Zebra_DatePicker').update({
                  enabled_hours: enabled_hours,
                  // view: "time" - setting the view here would be a possibility, but is not implemented in Zebra 
                });
              } else if(day == 5) {
                // Friday
                enabled_hours = []
                for(let i = 8; i <= 14; i++){
                  enabled_hours.push(i);
                }
                $(this).data('Zebra_DatePicker').update({
                  enabled_hours: enabled_hours,
                  // view: "time" - setting the view here would be a possibility, but is not implemented in Zebra 
                });
              }
            });
          });
        }
      }
    });
    

    And another topic: Would be also awesome to have the possibility to set the start time and end time (e.g. 8am-4:30pm, now I only can set the enabled_minutes to [0, 30] but that's not the best solution for this.

    Thanks in advance, cheers, Michael

    opened by Drotak 1
  • set_date not working when format is set to 'd M y H:i:s'

    set_date not working when format is set to 'd M y H:i:s'

    set_date not working when format is set to 'd M y H:i:s'. Please give me a quick fix asap....

    As per investigation the 'check_date' function is returning false, tested with both passing a date object or a date string in the same desired format.

    I'm using the latest version of Zebra Datepicker

    bug 
    opened by tarunparswani26 5
  • Idea: Adding Support for Multi-Regional Calendar

    Idea: Adding Support for Multi-Regional Calendar

    Hey i am working with this calendar many years, nice and super fast, it is simple but perfect design but we have a programs that need to support other country calendar, like Persian (also called the Solar Hejri calendar or Shamsi Hijri calendar,) that will use in some asian countries like Afghanistan, Iran and so on.

    so i decide add some code to base calendar js and share it with people around the world with different culture to use it.

    Steps you need is:

    var datepicker_fa_IR = {
        calendar: JalaliDate,
        months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
        days: ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'],
        months_abbr: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
        days_abbr: ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
        first_day_of_week: 6,
        weekend_days: [5],
        format: 'Y/m/d',
        lang_clear_date: 'پاک کردن',
        readonly_element: false,
        show_select_today: 'امروز',
        //offset: [2, 230],
        open_icon_only: true
    };
    

    Final result: preview

    opened by mahdiit 5
  • Can choose month with no available days

    Can choose month with no available days

    I have a calendar which utilizes the disable_dates & enable_dates features to only allow choosing certain days within a month. I am also using the direction to ensure no dates in the future can be selected.

    Today is December 1st, and that particular day is not within the enabled dates, thus December has no available dates (the most recent available in this case is Nov 15th). However, when I open the picker into months view (my default initial view) it allows choosing Dec. Then if I do choose December I am brought into days view with all of the days disabled.

    This is confusing to my end users, who would expect the Dec option to be disabled in the months view.

    I presume a similar issue will happen in about a month where, come Jan 1st 2017, not only will Jan be enabled in months view, but 2017 will be enabled in years view despite no dates being available in 2017 yet at that point.

    opened by djohle 0
Releases(1.9.19)
  • 1.9.19(Apr 6, 2022)

    • the library will now allow days/months both with and without leading zeros for d, j, m and n; see #173
    • updated how the show_icon property works so that it can now be used to set the text that appears in the icon (button element); see #182
    • fixed a minor issue with the HTML markup; see #185
    Source code(tar.gz)
    Source code(zip)
  • 1.9.18b(Dec 31, 2020)

  • 1.9.18(Dec 31, 2020)

  • 1.9.17(Dec 23, 2020)

  • 1.9.16(Oct 14, 2020)

  • 1.9.15(Jun 17, 2020)

  • 1.9.14(Apr 27, 2020)

  • 1.9.13(Sep 26, 2019)

    • the onChange event is now also triggered when switching to the time view
    • fixed #132 where English ordinal suffixes for 11th, 12th, and 13th where incorrectly shown as 11st, 12nd, and 13rd. - thanks @panzerchris!
    • fixed #148 where specifying enabled_hours, enabled_minutes and enabled_seconds as strings rather than integers would break the time picker
    • calling the update method now repaints the date picker
    • merged pull request #135 which allows time intervals to change while mouse button is being pressed - thanks @sebipopa!
    • merged pull request #139 which fixes a bug where, when having the year selector as the only available pane, the selected date would incorrectly be set to February instead of January - thanks @duckboy81!
    Source code(tar.gz)
    Source code(zip)
  • 1.9.12(Oct 27, 2018)

    • added support for RTL languages, fixing #126 - thanks @Abdox3!
    • fixed #124 where, when resizing the window, the onClose event would fire multiple times - thanks @kouts!
    • merged pull request #125 by mckey fixing a bug when dynamically changing enabled/disabled dates
    • the hour in the time picker now respects the given format regarding the leading zeroes
    • added a new property called fast_navigation which, when set to false, disables the default behavior that allows the users to quickly navigate through months and years by clicking on the date picker's top label; this answers @Leslie Cohn-Wein's two and a half year old request #66! thank you and sorry it took so long! better later than never :)
    • added a new property called current_date which, when set to a date in the format of YYYY-MM-DD overrides the value of Today; this answers @Jefferson Borges's two and a half year old request #74! thank you and sorry it took so long!
    • fixed a bug where when having a or A the time's format (indicating a 12-hour time) but the hour's format is H or G (indicating a 24-hour time), time picking was not working correctly; these will now be automatically replaced with h and g respectively
    • adjusted font size for the time picker and fixed spacing issues when having a time format with hours, minutes, seconds and am/pm
    Source code(tar.gz)
    Source code(zip)
  • 1.9.11(Aug 10, 2018)

  • 1.9.10(Jul 9, 2018)

  • 1.9.9(Jul 6, 2018)

    • global defaults can now be set; see #110 and #94
    • setting the readonly_element property to FALSE will now unset the readonly attribute from the element, if present; see #109
    • fixed a bug where on pages with multiple time pickers, selecting a time on one would select the time on all other time pickers that are empty; see #115 and thank you michealharrington!
    • added a new disable_time_picker property for explicitly disabling the time picker even if format includes time-related characters; see #118
    • fixed an issue on Android devices; see #116
    • allow accented chars in weekday name; see #120
    • added version number as a public property - useful to find out the version number even if all you have is the minified source code; see #96
    Source code(tar.gz)
    Source code(zip)
  • 1.9.8(Apr 8, 2018)

    • fixed some issues because of which the date picker was not working in IE6, 7 & 8
    • fixed an issue where on iOS and Microsoft Edge the next and previous buttons in the header were rendered as emoji characters; see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11844964/
    • fixed some issues with the icon's positioning if the target element was explicitly positioned and/or it had margins; the icon's position now depends on the element's padding but can also be set via the newly added icon_marginproperty
    • for touch-enabled devices, when readonly_element is set to FALSE, wait for the virtual keyboard to appear before positioning the date picker; previously the date picker was being closed on this event
    • the date picker is not closing anymore when the screen is dragged (on touch devices)
    • fixed #112
    • fixed #104
    • fixed issue with the onSelect event being triggered multiple times if the time picker was enabled and not returning time when it should
    • improved user experience in examples
    • some documentation updates
    Source code(tar.gz)
    Source code(zip)
  • 1.9.7(Dec 3, 2017)

    • the date picker now also works as a time picker by setting time-related parts in the format property
    • the date picker can now also be shown when the parent element and/or the associated icon is focused by setting the newly add open_on_focus property to TRUE; see #80
    • fixed a bug where clearing a date would not return focus to the parent element
    • fixed memory leaks, see #81, thanks to @sszabolcs
    • fixed value of "today" being cached; see #83, thanks to @CJDennis
    • fixed possible issues by adding more randomness for each date picker's internally used ID; see #84
    • rewrote the SCSS for all the 3 themes and made theming a lot easier by introducing variables
    • all the themes are now using a single sprite image instead of multiple images
    • source code updates and tweaks because of which the plugin is now compatible with jQuery 1.7.0+ (previously it was compatible with jQuery 1.5.2+)
    • improved user experience in examples
    • some documentation updates
    Source code(tar.gz)
    Source code(zip)
  • 1.9.6(Jun 24, 2017)

    • performance improvements and source code tweaks
    • new folder structure
    • the home of the library is now exclusively on GitHub
    • files required in the build process are not included anymore when installing via npm nor when downloading from GitHub
    Source code(tar.gz)
    Source code(zip)
  • 1.9.5(May 13, 2016)

    • fixed a bug when parent elements were having the "display" property set to "block
    • fixed a bug with updating a dependent picker; thanks anli-xsigns
    • added verification if custom class is defined or not, and added extra checks before traversing it; also if mootools is also present, it modifies arrays prototypes so they are not handled well with normal jquery methods if null; thanks anli-xsigns
    • fixed some memory leaks when destroying the plugin; thanks to Constantin Teodorescu for reporting
    • fixed a bug with custom classes not working anymore; thanks to Sune Westphalen
    • optimized images size
    Source code(tar.gz)
    Source code(zip)
  • 1.9.4(Jan 25, 2016)

    • images now have their own folder instead of being mixed with the stylesheets; thanks to Maxime Pasquier
    • icon position can now be also set to the left of the element; thanks to Jennifer for suggesting
    • added possibility to easily apply custom classes to date ranges - see the newly added custom_classes property; thanks to Märt Tibar for suggesting
    • the library is now also available as a npm package
    • fixed a bug that made impossible to install the library via Bower
    Source code(tar.gz)
    Source code(zip)
  • 1.9.3(Jan 11, 2016)

    • when the "value" attribute of the element is set, use that instead of "start_date"; thanks Vojtěch Biberle
    • fixed a bug where "header_navigation", "lang_clear_date" and "show_select_today" properties could not be updated via the "update" method; thanks André Fiedler
    • fixed a bug where the paired date picker was not updated when users would manually enter a date in the first date picker; thanks Toby for reporting
    • icon position is now updated when changing orientation on mobile devices; thanks to chenghong for suggesting
    • added "clear_date" and "set_date" public methods; thanks Jason Davis for suggesting
    • added new "open_icon_only" property which, when set to TRUE, will result in the date picker showing only when users click on the associated icon, and not on element focus
    • dates prior to year 1000 are now disabled as this library cannot handle years below 1000
    • better comnonjs-support; thanks Stefan Schult
    Source code(tar.gz)
    Source code(zip)
  • 1.9.2(Apr 30, 2015)

  • 1.9.1(Apr 14, 2015)

    • fixed an issue where having more date pickers on a page and destroying one of the date pickers would remove the event handlers for all date pickers on the page; thanks to lpproulx for reporting;
    • date pickers can now also be injected in custom elements; previously date picker were always injected in the element; very useful if you want the date picker to always open at a specific position; thanks to Daniel Ivan for suggesting;
    • the library is now compatible with AMD and CommonJS; thanks to Andrzej Duś
    • added a new "onClose" event; thanks to W. van Kuipers;
    • added touchstart event for closing the date picker on a touchevent enabled browsers; thanks W. van Kuipers
    • increased zIndex value to 1200, making the date picker usable with Twitter Bootstrap's modals; thanks to Kiswono Prayogo;
    • better fix for the issues in Firefox, solved in previous release, which made transitions to not work anymore; thanks to René Jackowski
    Source code(tar.gz)
    Source code(zip)
  • 1.9.0(Nov 14, 2014)

    • added some CSS attributes for the main table, in order to override defaults set by some frameworks; thanks to Paul Morganthall for suggesting;
    • added a new "default_position" property, useful for setting whether the date picker should, by default, appear above or below the element it is attached to;
    • fixed an issue in latest versions of Firefox in which, even though the date picker is absolutely positioned, it takes up space in the layout; thanks to Joost for noticing;
    • fixed a bug with paired date pickers where the second date picker's range was not depending on the first date picker's date unless a date in the first date picker was manually selected, and thus ignoring any default values; thanks to Pascal Lindelauf;
    • fixed a bug with highlighting months where in "months" view, if current date was higher than the number of days in February, the month would not be highlighted; thanks to Mark Tuor;
    • fixed a bug with where if a text box a date picker is attached to would be disabled at run-time, the date picker's calendar icon would remain "enabled" after calling the "update" method; thanks to Frans for reporting;
    • datepicker visibility is now controlled from CSS;
    • fixed an issue because of which the library was not compatible with jQuery 1.5.2+ (as stated) but required jQuery 1.7+ instead; thanks to MartinGaedeke for spotting it and to Prakhar Birla for the fix;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.9(May 20, 2014)

    • added a new "header_captions" property, useful for customizing captions in the datepicker's header, for the 3 possible views: days, months, years; thanks to Lodewyk and Ram for suggesting;
    • added a new "onOpen" event for executing callback functions when the date picker is shown;
    • the "onSelect" callback takes an extra argument - the ISO 8601 week number of the selected date;
    • users can now always use the next/previous buttons; thanks to Mozart for suggesting;
    • the "this" keyword in callbacks now correctly refer to the element the datepicker is attached to; thanks to syahman for reporting;
    • when having a date formats without year, the "years" view will not be visible anymore; thanks to MarkG;
    • fixed a bug when having non ASCII characters in month names; thanks to straightdog and Muhobrc for reporting, and to D-ominik for providing a fix;
    • fixed an issue with the "pair" attribute which, when given as a data attribute, would cause a JavaScript error; thanks to Domenico Giambra;
    • fixed a bug with the iFrame shim in IE6 which was not working as expected and "selects" elements where shown above the date picker; thanks to chenghong for reporting;
    • fixed a minor bug where the date picker would close for any key press not just for the ESC key; thanks to nacho for reporting;
    • fixed a minor bug where, when looking at the "months" view, the selected month would always be highlighted even if the user would switch years; thanks to Yoyee Zhu for reporting;
    • updated jQuery version in the examples folder to 1.11.1;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.8(Dec 9, 2013)

  • 1.8.7(Nov 28, 2013)

    • added a new "header_navigation" property allowing custom HTML for the next/previous months buttons; thanks to norlin;
    • fixed a minor bug with paired date pickers;
    • minor performance tweaks;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.6(Oct 5, 2013)

    • added a new "strict" property which controls whether default values, in the input field the date picker is attached to, should be deleted if they are not valid according to "direction" and/or "disabled_dates", and which is set to FALSE by default; previously the plugin was always removing such dates; thanks Morten;
    • fixed a bug width selectable dates of other months than the current one having an incorrect class attached to them; thanks to Khoomei for spotting this!
    • fixed a bug where when clearing dates of always-visible datepickers, the class indicating the "selected" state of cells was not being removed;
    • removed some old code that was used back when the calendar icon was absolutely positioned and because of which the calendar icon was invisible if the parent element was placed in a parent element with "display: none"; thanks to Michael Residori;
    • updated jQuery version used in examples to 1.10.2;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.5(Sep 21, 2013)

    • properties can now be set via data attributes; thanks to Yuriy Silvestrov who suggested this a long time ago;
    • fixed a bug where if the "show_icon" property was set to FALSE an open date picker would not close upon window resize and therefore it would remain in an incorrect position if the parent element was to change position during the process; thanks Marco;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.4(Aug 11, 2013)

    • added a "destroy" method; thanks TeckniX;
    • date picker now disappears upon window resize; previously it would remain in the same position upon window resize, even though the parent element could be repositioned in the process; thanks hanneslinder;
    • fixed a position bug that appearing in newer versions of Firefox where Firefox sets the "display" property of <input> elements to "inline" instead of "inline-block" as do the other browsers; thanks to discotizer;
    Source code(tar.gz)
    Source code(zip)
  • 1.8.3(Aug 5, 2013)

    • fixed a bug where the plugin would freeze for certain combinations of disabled/enabled dates; thanks Yogesh;
    • fixed a bug where having two paired date picker with "direction" set to FALSE, the second date picker will not obey this rule once a date is selected in the first date picker; thanks Shane M;
    • fixed a bug where when having paired date pickers, the "Today”" button was sometimes available although it shouldn't have been; thanks Matt;
    • fixed some indenting issues and the scope of some variables; thanks W. van Kuipers;
    • fixed a few minor issues reported by JSFiddle’s JSHint;
    • minor update of source code regarding optimal usage of jQuery for creating the wrapper around the parent element;
    Source code(tar.gz)
    Source code(zip)
Owner
Stefan Gabos
Web developer working from Bucharest, Romania. I'm half Hungarian, stubborn, articulate, and slightly afraid of women.
Stefan Gabos
A simplified jQuery date and time picker

jSunPicker A simplified jQuery date and time picker Why another Date picker? There are numerous date, time pickers out there. However, each of those l

null 1 May 31, 2022
Simple date and time picker in vanilla javascript

simplepicker Simple datetime picker in vanilla javascript. This project is mostly based on material-datetime-picker, but without it relying on externa

Priyank Patel 51 Jul 18, 2022
A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

null 22 Dec 6, 2022
Bootstrap Persian/Gregorian Date Time Picker

MD.BootstrapPersianDateTimePicker Bootstrap 5+ Persian And Gregorian Date Time Picker Major changes: Using Bootstrap 5 jQuery Removed Rewrite all code

Mohammad Dayyan 305 Nov 23, 2022
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
A lightweight, powerful and highly extensible templating engine. In the browser or on Node.js, with or without jQuery.

JsRender: best-of-breed templating Simple and intuitive, powerful and extensible, lightning fast For templated content in the browser or on Node.js (w

Boris Moore 2.7k Jan 2, 2023
📆 The modern, open source "Airbnb style" date picker.

Date Picker A pretty, modern date picker. Coming soon. ?? Get Started wip wip ?? Testing pnpm test ?? Changelog Please see our releases page for more

Open Web Foundation 8 Oct 11, 2022
This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my initial appointment date. It doesn't handle rescheduling.

US-visa-appointment-notifier This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my in

Theophilus Omoregbee 13 Jan 4, 2023
A jQuery plugin that adds cross-browser mouse wheel support.

jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. In order to use the plugin, simply bin

jQuery 3.9k Dec 26, 2022
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes

Minh Nguyen 1.9k Dec 27, 2022
jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot of features and works in all browsers.

jQuery Easy Ticker plugin jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely. It is highly customizable, flexible with lo

Aakash Chakravarthy 208 Dec 20, 2022
A lightweight cross browser javascript scrollbar.

tinyscrollbar ** HELP MAINTAINER NEEDED!! ** Environments in which to use tinyscrollbar Browser support differs between the jQuery plugin and the plai

Maarten Baijs 398 Nov 9, 2022
Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags.

jquery.picky.js Picky is a jQuery plugin that provides simple client-side date validation when entering dates using select tags. Features Instead of g

Patrick Crowley 5 Apr 25, 2021
Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Ivan Matveev 15 Nov 14, 2022
Turn an HTML input box to a duration picker, without jQuery

html-duration-picker.js html-duration-picker.js is a very tiny JS library used for transforming a native HTML text input into a duration picker. The a

Dan Chif 27 Oct 19, 2022
Quick access to view the current time and date in Ethiopian calendar.

Ethiopian-Current-time-chrome-extension Quick access to view the current time and date in Ethiopian calendar. steps to follow:- Extract the zip folder

null 10 Aug 26, 2022