Free jquery date picker plugins

Options — Disabling Things

These options are associated with disabled various things.


constpicker=datepicker('.some-input',{ noWeekendstrue})
  • Type — boolean
  • Default —
constpicker1=datepicker('.some-input1',{disablerdate=>date.getDay()===2})constpicker2=datepicker('.some-input2',{disablerdate=>date.getMonth()===9})
  • Arguments:
    1. — JavaScript date object representing a given day on a calendar.
constpicker=datepicker('.some-input',{  disabledDatesnewDate(2099,,5),newDate(2099,,6),newDate(2099,,7),})

Type — array of JS date objects

Optionally disable Datepicker on mobile devices. This is handy if you’d like to trigger the mobile device’s native date picker instead. If that’s the case, make sure to use an input with a type of «date» —

constpicker=datepicker('.some-input',{ disableMobiletrue})
  • Type — boolean
  • Default —

Clicking the year or month name on the calendar triggers an overlay to show, allowing you to enter a year manually. If you want to disable this feature, set this option to .

constpicker=datepicker('.some-input',{ disableYearOverlaytrue})
  • Type — boolean
  • Default —

Want to completely disable the calendar? Simply set the property on the datepicker instance to to render it impotent. Maybe you don’t want the calendar to show in a given situation. Maybe the calendar is showing but you don’t want it to do anything until some other field is filled out in a form. Either way, have fun.

Example:

constpicker=datepicker('.some-input')functiondisablePicker(){picker.disabled=true}functionenablePicker(){picker.disabled=false}functiontogglePicker(){picker.disabled=!picker.disabled}

Installation

Simply include in the …

<head>  ...<linkrel="stylesheet"href="datepicker.min.css"></head>

and include just above your closing tag…

<body>  ...<scriptsrc="datepicker.min.js"></script></body>

If you downloaded the package via zip file from Github, these files are located in the folder. Otherwise, you can use the Unpkg CDN as shown in the examples above.

Files & locations:

File Folder Description
datepicker.min.js node_modules/js-datepicker/dist production build — (ES5, 5.9kb gzipped)
datepicker.min.css node_modules/js-datepicker/dist production stylesheet
datepicker.scss node_modules/js-datepicker/src Scss file. Use it in your own builds.

jQuery Calendar Plugins:

Create A Simple Event Calendar with jQuery — e-calendar

e-calendar is a lightweight and easy to use jQuery plugin that helps you to create an intuitive event calendar widget on your website.

Responsive Event Calendar & Date Picker jQuery Plugin — Monthly

Monthly is a jQuery plugin that provides responsive and easy-to-customize event calendar and date picker for your web application.

jQuery Calendar Plugin Using HTML Templates — CLNDR.js

CLNDR.js is a jQuery plugin based on moment.js and underscore.js that allows you to create a calendar with event support using HTML template.

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap — Zabuto Calendar

Zabuto Calendar is a jQuery calendar plugin working with ‘s bootstrap that allows you to create a monthly calendar with ajax data events support on your web page.

Pretty Event Calendar & Datepicker Plugin For jQuery — Calendar.js

Calendar.js is highly customizable jQuery plugin that helps you create inline event calendars and date pickers for your website or web application.

Basic Usage (v3):

1. Include the necessary jQuery and moment.js libraries in the document.

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

2. Include the FullCalendar plugin’s files.

<link rel="stylesheet" href="fullcalendar.css">
<script src="fullcalendar/fullcalendar.js"></script>

3. You can also import the FullCalendar as a module.

npm install jquery moment fullcalendar
import $ from 'jquery';
import 'fullcalendar';

4. Call the function on the element in which you want to place the calendar and add your own events as follows:

<div id="container"></div>
$('#container').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listWeek'
  },
  defaultDate: '2019-01-12',
  navLinks: true, // can click day/week names to navigate views
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
    {
      title: 'All Day Event',
      start: '2019-01-01',
    },
    {
      title: 'Long Event',
      start: '2019-01-07',
      end: '2019-01-10'
    },
    {
      id: 999,
      title: 'Repeating Event',
      start: '2019-01-09T16:00:00'
    },
    {
      id: 999,
      title: 'Repeating Event',
      start: '2019-01-16T16:00:00'
    },
    {
      title: 'Conference',
      start: '2019-01-11',
      end: '2019-01-13'
    },
    {
      title: 'Meeting',
      start: '2019-01-12T10:30:00',
      end: '2019-01-12T12:30:00'
    },
    {
      title: 'Lunch',
      start: '2019-01-12T12:00:00'
    },
    {
      title: 'Meeting',
      start: '2019-01-12T14:30:00'
    },
    {
      title: 'Happy Hour',
      start: '2019-01-12T17:30:00'
    },
    {
      title: 'Dinner',
      start: '2019-01-12T20:00:00'
    },
    {
      title: 'Birthday Party',
      start: '2019-01-13T07:00:00'
    },
    {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2019-01-28'
    }
  ]
});
$('#container').fullCalendar({
  titleRangeSeparator: ' \u2013 ',
  monthYearFormat: 'MMMM YYYY',
  defaultTimedEventDuration: '02:00:00',
  defaultAllDayEventDuration: { days: 1 },
  forceEventDuration: false,
  nextDayThreshold: '09:00:00',
  columnHeader: true,
  defaultView: 'month',
  aspectRatio: 1.35,
  header: {
    left: 'title',
    center: '',
    right: 'today prev,next'
  },
  weekends: true,
  weekNumbers: false,
  weekNumberTitle: 'W',
  weekNumberCalculation: 'local',
  scrollTime: '06:00:00',
  minTime: '00:00:00',
  maxTime: '24:00:00',
  showNonCurrentDates: true,
  lazyFetching: true,
  startParam: 'start',
  endParam: 'end',
  timezoneParam: 'timezone',
  timezone: false,
  locale: null,
  isRTL: false,
  buttonText: {
    prev: 'prev',
    next: 'next',
    prevYear: 'prev year',
    nextYear: 'next year',
    year: 'year',
    today: 'today',
    month: 'month',
    week: 'week',
    day: 'day'
  },
  allDayText: 'all-day',
  agendaEventMinHeight: 0,
  theme: false,
  dragOpacity: .75,
  dragRevertDuration: 500,
  dragScroll: true,
  unselectAuto: true,
  dropAccept: '*',
  eventOrder: 'title',
  eventLimit: false,
  eventLimitText: 'more',
  eventLimitClick: 'popover',
  dayPopoverFormat: 'LL',
  handleWindowResize: true,
  windowResizeDelay: 100,
  longPressDelay: 1000
});

Now to add the datepickers and monthpickers to the page!

These following javascript code-snippets work with multiple datepickers and/or monthpickers on the page, without the aforementioned problems! Fixed generally by using ‘$(this).’ a lot 🙂

The first script is for a normal datepicker, and the second one is for the «new» monthpickers.

The out-commented .after, which lets you create some element to clear the input-field, is stolen from Paul Richards’ answer.

I’m using the «MM yy» format in my monthpicker, and the ‘yy-mm-dd’ format in my datepicker, but this is completely compatible with all formats, so you are free to use whichever one you want. Simply change the ‘dateFormat’ option. The standard options ‘showButtonPanel’, ‘showAnim’, and ‘yearRange’ are of course optional and customizable to your wishes.

Changelog:

2019-07-11

v1.4.31: updated

2018-07-30

v1.4.30:  feature update

2018-04-02

v1.4.29:  feature update

2018-03-23

v1.4.28:  Support ES6 with babel


2017-11-28

v1.4.27: update locale uk, ru of controls

2017-11-27

v1.4.26: update translation / add david badge

2017-09-07

v1.4.23: solve configure issue

2017-09-04

v1.4.22: fix set method’s module bugs

2017-08-20

v1.4.21: Added prev, next, page, init events

2017-06-12

v1.4.19: Less is supported.

2017-05-07

v1.4.17: Fixed click callback bugs.

2017-04-24

v1.4.16: Fix input calendar bug when buttons option is .

2017-04-20

v1.4.14: Update setting feature.

2017-03-03

  • Storage key rename.
  • AMD, CommonJS module are supported.

2017-03-02

Theme bugs are fixed.

2017-02-03

Change wrong wordings 

2017-01-17

Toggle initialize a date issue are fixed.

2016-11-30

Update new features (weeks clicking, French language fixs).

2016-11-25

Setting range and new language.

2016-11-15

  • Disable option priority is changed.
  • Delete useless files.

2016-11-10

Initialized date option are added.

2016-11-08

Disabled multiple ranges feature and detail sub-classes added, Multiple input type single date format are changed.

2016-11-05


Performance for rendering is optimized for lower version browsers.

2016-11-04

Added Disabled date range.

2016-10-22

enabledDates are added and today click bug are fixed.

2016-10-21

Reverse toggle type be added.

2016-10-09

  • ActiveDates bugs fixed.
  • Modal view type support.
  • Prev: Pie Chart-like Circular Timer With jQuery And SVG — polartimer.js
  • Next: Circular SVG Timer Range Picker Plugin With jQuery

Basic Usage:

1. Load the latest version of jQuery and the jQuery simple event calendar plugin in the web page.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/simplecalendar.js"></script>

2. Load the required stylesheet for basic calendar styles.

<link rel="stylesheet" href="path/to/style.css">

3. Load the OPTIONAL Font Awesome 4 for calendar icons.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/simplecalendar.js"></script>

4. Create a table for the calendar.

<table>
  <thead>
    <tr>
      <td>MON</td>
      <td>TUE</td>
      <td>WED</td>
      <td>THU</td>
      <td>FRI</td>
      <td>SAT</td>
      <td>SUN</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td date-month="12" date-day="1">1</td>
      <td date-month="12" date-day="2">2</td>
      <td date-month="12" date-day="3">3</td>
      <td date-month="12" date-day="4">4</td>
      <td date-month="12" date-day="5">5</td>
      <td date-month="12" date-day="6">6</td>
      <td date-month="12" date-day="7">7</td>
    </tr>
    <tr>
      <td date-month="12" date-day="8">8</td>
      <td date-month="12" date-day="9">9</td>
      <td date-month="12" date-day="10">10</td>
      <td date-month="12" date-day="11">11</td>
      <td date-month="12" date-day="12">12</td>
      <td date-month="12" date-day="13">13</td>
      <td date-month="12" date-day="14">14</td>
    </tr>
    <tr>
      <td date-month="12" date-day="15">15</td>
      <td date-month="12" date-day="16">16</td>
      <td date-month="12" date-day="17">17</td>
      <td date-month="12" date-day="18">18</td>
      <td date-month="12" date-day="19">19</td>
      <td date-month="12" date-day="20">20</td>
      <td date-month="12" date-day="21">21</td>
    </tr>
    <tr>
      <td date-month="12" date-day="22">22</td>
      <td date-month="12" date-day="23">23</td>
      <td date-month="12" date-day="24">24</td>
      <td date-month="12" date-day="25">25</td>
      <td date-month="12" date-day="26">26</td>
      <td date-month="12" date-day="27">27</td>
      <td date-month="12" date-day="28">28</td>
    </tr>
    <tr>
      <td date-month="12" date-day="29">29</td>
      <td date-month="12" date-day="30">30</td>
      <td date-month="12" date-day="31">31</td>
    </tr>
  </tbody>
</table>

5. Add a list of your events to the calendar as follows.

<div class="list">
  <div class="day-event" date-month="12" date-day="4"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 1</h2>
    <p class="date">2014-12-16</p>
    <p>Event 1</p>
    <label> <span>Read more!</span> </label>
  </div>
  <div class="day-event" date-month="12" date-day="13"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 2</h2>
    <p class="date">2014-12-16</p>
    <p>Event 2</p>
    <label> <span>Read more!</span> </label>
  </div>
  <div class="day-event" date-month="12" date-day="14"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 3</h2>
    <p class="date">2014-12-16</p>
    <p>Event 3</p>
    <label> <span>Read more!</span> </label>
  </div>
  <div class="day-event" date-month="12" date-day="16"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 4</h2>
    <p class="date">2014-12-16</p>
    <p>Event 4</p>
    <label> <span>Read more!</span> </label>
  </div>
  <div class="day-event" date-month="12" date-day="24"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 5</h2>
    <p class="date">2014-12-16</p>
    <p>Event 5</p>
    <label> <span>Read more!</span> </label>
  </div>
  <div class="day-event" date-month="12" date-day="31"> <a href="#" class="close fa fa-remove"></a>
    <h2 class="title">Lorem ipsum 6</h2>
    <p class="date">2014-12-16</p>
    <p>Event 6</p>
    <label> <span>Read more!</span> </label>
  </div>
</div>

How to use it:

1. Include the required jQuery kalendar’s stylesheet file to make your event calendar responsive and flat styled.

<link href="kalendar.css" rel="stylesheet">

2. Create a container where you want to place the event calendar.

<div class="kalendar">
</div>

3. Include the jQuery javascript library and jQuery kalendar’s script at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="kalendar.js"></script>

4. Call the plugin on the calendar container and add your own events in the javascript.

$('.kalendar').kalendar({

events: [
{
title: "Title of event",
start: {
date: YYYYMMDD or "YYYYMMDD",   // "20131230"
time: "HH.MM"   // "12.00"
},
end: {
date: YYYYMMDD or "YYYYMMDD",   // "20131230"
time: "HH.MM"   // "20.00"
},
location: "Location",   // "London"
url: "http://*.*",  // "http://example.com"
color: "string" // "red" string containing reference to the eventcolorsobject
}
],
// Custom colorsets to set a specific color to an event. If one of the three variables isn’t set the inherit value will be used.
eventcolors: {
yellow: {
background: "#FC0", // Backgroundcolor, optional
text: "#000",   // Text color, optional
link: "#000"// Link color, optional
}
}

// Currently available colors are: red, blue, green, yellow. Red is the default.
color: "blue",

// Default is Monday, but any day of the week is applicable.
firstDayOfWeek: "Sunday",

// Google Calendar reference are objects, place inside of an array to support multiple calendars.
// If you are unsure how to get an API-key visit: https://developers.google.com/google-apps/calendar/firstapp
// If you are unsure how to get your calendar visit: https://support.google.com/calendar/answer/63962?hl=en
googleCal: ,

// Any name is possible, but note that not all names might fit in the UI

monthHuman: ,, etc... ],

// Regarding name lengths same applies here

dayHuman: ,, etc... ],

// The text which represents links for events

urlText: "View on Web",

// Callbackevents will be fired when a certain criteria is met. The following are the currently supported events

onInitiated: function() {}, // After the kalendar have been fully initiated. E.g when everything is loaded
onGoogleParsed: function() {},  // After Google Calendar events, if they exist, have been parsed
onMonthChanged: function() {},  // After events passed to the plugin have been parsed
onDayShow: function() {},   // When a specific day have started to load. E.g when a day with an event attached to it is clicked
onGridShow: function() {},  // When the grid of days have started to load. E.g when a specific dayview have been cancelled
onDayClick: function(e) {}  // When a day gets clicked, no matter if it contains any event or not. Passed to this function is whether the dayis from this month or if it’s the current day. This can be accessed in the variable e.data.info

});
  • Prev: Google Calendar-Like jQuery Data & Time Range Picker — datepair
  • Next: Responsive Flat Date & Time Picker with jQuery DateTimePicker Plugin

Custom Elements / Shadow DOM Usage

You can use Datepicker within a Shadow DOM and custom elements. In order to do so, must pass a node as the 1st argument:

classMyElementextendsHTMLElement{constructor(){super()constshadowRoot=this.attachShadow({ mode'open'})shadowRoot.innerHTML=`<div><style>${textOfDatepickersCSS}</style><input /></div>`this.input=shadowRoot.querySelector('input')}connectedCallback(){datepicker(this.input)}}customElements.define('my-element', MyElement)

All other options work as expected, including dateranges. You can even have a date range pair with one calendar in the shadow DOM and another outside it!

Change logs:

2017-10-06

v2.2.2

2017-05-25

Fix incorrect listing of «AM» vs «PM» in event list

2017-02-27

Fix readme tag, add dtYYYY-MM-DD class to days

2017-02-08

Fixed Calendar does not load in IE 10

2017-01-17

v2.2:  A good deal of edits including localization, code cleanup & json events. 

2016-09-02

v2.1: Fixed a bug where the event list would animate in but not out. Merged a pull request to include json support. (Thanks marekstodolny!) Made buttons more visible in header for closing event list & reverting to the current month.

2016-04-27

v2.0.7: Fixed a bug where divs were left behind when advancing through months. Merged a pull request fixing day name options.

2016-03-17

v2.0.6: Fixed a bug where AM and PM would show up even if there’s no time specified. Also fixed a bug where long event titles weren’t being truncated. Added xml error handling.

2016-02-17


v2.0.5: Dropped flexbox in favor of display:table-cell to support IE9

2016-02-11

v2.0.4: Added more vendor prefixes to support older versions of iOS

2016-01-18

v2.0.3: Fixed a big caused by using Monday as the start of the week, and months where the first day is Sunday.

2016-01-07

v2.0.2: Fixed a bug caused by using zero indexed days or months in the xml file. Fixed another bug where setting eventList to false didn’t work.

2016-01-06

v2.0.1: Mobile style tweak

  • Prev: Minimal Duration Picker Plugin For jQuery and Bootstrap
  • Next: Feature-rich Date Picker Plugin with jQuery — wsCalendar

Options — Settings

Use these options to set the calendar the way you want.

By default, the datepicker will hide & show itself automatically depending on where you click or focus on the page. If you want the calendar to always be on the screen, use this option.

constpicker=datepicker('.some-input',{ alwaysShowtrue})
  • Type — boolean
  • Default —

This will start the calendar with a date already selected. If Datepicker is used with an element, that field will be populated with this date as well.

constpicker=datepicker('.some-input',{ dateSelectednewDate(2099,,5)})

Type — JS date object

This will be the maximum threshold of selectable dates. Anything after it will be unselectable.

constpicker=datepicker('.some-input',{ maxDatenewDate(2099,,1)})

Type — JavaScript date object.

on the first instance options it will be ignored on the 2nd instance options.

This will be the minumum threshold of selectable dates. Anything prior will be unselectable.

constpicker=datepicker('.some-input',{ minDatenewDate(2018,,1)})

Type — JavaScript date object.

on the first instance options it will be ignored on the 2nd instance options.

The date you provide will determine the month that the calendar starts off at.

constpicker=datepicker('.some-input',{ startDatenewDate(2099,,1)})
  • Type — JavaScript date object.
  • Default — today’s month

By default, the datepicker will not put date numbers on calendar days that fall outside the current month. They will be empty squares. Sometimes you want to see those preceding and trailing days. This is the option for you.

constpicker=datepicker('.some-input',{ showAllDatestrue})

  • Type — boolean
  • Default —

‘s can have a or attribute applied to them. In those cases, you might want to prevent Datepicker from selecting a date and changing the input’s value. Set this option to if that’s the case. The calendar will still be functional in that you can change months and enter a year, but dates will not be selectable (or deselectable).

constpicker=datepicker('.some-input',{ respectDisabledReadOnlytrue})
  • Type — boolean
  • Default —

Local Development

The branch contains the latest version of the Datepicker component.

To begin local development:

You can run to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in ). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.

Features:

  • You can add date events to the calendar by using an AJAX GET request. The response has to return a JSON encoded array of events in a specified format. Use a Bootstrap JS modal window. The information will be shown with a click on the day of the event.
  • You can add a legend to clarify the styling of the date events shown on the calendar.
  • The calendar supports these language codes: de (German), en, es (Spanish), fr (French), nl (Dutch).
  • You can add a function to the calendar to execute when the onclick event is triggered on a specific day.
  • You can alter the navigation and appearance of the calendar in several ways

Adding a monthpicker

Include the monthpicker.js file and the monthpicker.css file in the page you want to use the monthpickers.

Monthpicker instantiation The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month, and ranges from 100 years ago and 10 years into the future.

That’s it! That’s all you need to make a monthpicker.

I can’t seem to make a jsfiddle work with this, but it is working for me in my ASP.NET MVC project. Just do what you normally do to add a datepicker to your page, and incorporate the above scripts, possibly by changing the selector (meaning $(«#MyMonthTextBox»)) to something that works for you.

I hope this helps someone.

Basic usage:

1. The plugin requires jQuery library and moment.js loaded in the webpage.

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

2. Add the PIGNOSE Calender’s stylesheet and JavaScript files to the webpage.

<link rel="stylesheet" href="pignose.calender.css">
<script src="pignose.calender.js"></script>

3. Create a placeholder element for the calendar.

<div class="calender"></div>

4. Generate a default calendar inside the DIV container.

$('.calender').pignoseCalender();

5. Default plugin settings.

$('.calender').pignoseCalender({

  // en, ko, fr, ch, de, jp, pt, fr
  lang: 'en',

  // You can change auto initialized date at first.
  date: moment(),

  // light, dark
  theme: 'light',

  // date format
  format: 'YYYY-MM-DD',

  // CSS class array
  classOnDays: [],

  // array of enabled dates
  enabledDates: [],

  // disabled dates
  disabledDates: [],

  // You can disable by using a weekday number array (This is a sequential number start from 0 ).
  disabledWeekdays: [],

  // This option is advanced way to using disable settings, You can give multiple disabled range by double array date string by formatted to 'YYYY-MM-DD'.
  disabledRanges: [],

  // Set and array of events to pin on calendar. 
  // Each event is an object that must contain a date string formatted to 'YYYY-MM-DD' and class key that belong to classOnEvents dictionary indicating its color on calendar. 
  // Events with not color class suitable are all pin with  #5c6270. 
  // Issues may arise when the number of color class increase, this could break the calendar cell.
  schedules: [],

  // Set a dictionary with class 'key' and color code 'value' used for pin events class by date.
  scheduleOptions: {
      colors: {}
  },

  // Your first day of week (0: Sunday ~ 6: Saturday).
  week: 0,

  // If you set true this option, You can use multiple range picker by one click on your Calendar.
  pickWeeks: false,

  //  You can turn on/off initialized date by this option.
  initialize: true,
  
  // enable multiple date selection
  multiple: false,

  // use toggle in the calendar
  toggle: false,

  // shows buttons
  buttons: false,

  // reverse mode
  reverse: false,
  
  // display calendar as modal
  modal: false,

  // add button controller for confirm by user
  buttons: false,

  // minimum disable date range by 'YYYY-MM-DD' formatted string
  minDate: null,

  // maximum disable date range by 'YYYY-MM-DD' formatted string
  maxDate: null,

  // called when you select a date on calendar (date click).
  select: functon (){},

  // If you set true this option, You can pass the check of disabled dates when multiple mode enabled.
  selectOver: false,

  // called when you apply a date on calendar. (OK button click).
  apply: functon (){},

  // called when you apply a date on calendar. (OK button click).
  click: null

});

С этим читают