Hevyweb Datepicker

Click on the button above to display the date picker. It appears under the input field. Select the date.

var datePicker = new DatePicker({
  input: $('input'),
  trigger: $('button')
});

datePicker.init();

Code

From:

To:

In this example when you select date in first datepicker, it disables all earlier dates in the second datepicker. This example is useful in case when you want to select a date range.

Datepicker support gives you a possibility to extend its functionality without changing the source code.

Supported events or hooks:

onOpen - event fires when datepicker appears, no matter is it the appearance or has been already closed.
onSelect - event fires when user picks the date. It accepts 1 parameter - initial jQuery click event.
onMonthChange - event is fired when user changes month. It accepts 2 parameters: Date object and initial jQuery click event.
onClose - event is fired when datepicker disappears. It accepts 1 parameter - initial jQuery click event.
onDateFocus - event is fired when you focus any date. It accepts 2 parameter - initial jQuery click event and the date, which is focused.
onDestroy - event is fired before you destroy the datepicker.

var datePicker1 = new DatePicker({
  input: $('#hw_example_input1'),
  trigger: $('#hw_example_button1'),
  events: {
    onSelect: function(e){
      var currentButton = $(e.currentTarget);
      var minDate = new Date();
      minDate.setTime(currentButton.attr("data-date"));
      datePicker2.minDate = minDate;
      if (datePicker2.currentPicker != null) {
        datePicker2.monthChange(minDate);
      }
    }
  }
});
    datePicker1.init();

var datePicker2 = new DatePicker({
  input: $('#hw_example_input2'),
  trigger: $('#hw_example_button2'),
  events: {
    onSelect: function(e){
      var currentButton = $(e.currentTarget);
      var maxDate = new Date();
      maxDate.setTime(currentButton.attr("data-date"));
      datePicker1.maxDate = maxDate;
      if (datePicker1.currentPicker != null) {
        datePicker1.monthChange(maxDate);
      }
    }
  }
});
datePicker2.init();

Code

For some countries calendar starts with Monday and for other - with Sunday.

var datePicker = new DatePicker({
  input: $('input'),
  trigger: $('button'),
  startWithMonday: true
});

datePicker.init();

Code

The example above is in ukrainian. Initially datepicker is in english. In the source code for this example I left original english translation even though the datepicker is in english. It was made to show you which parameters should be set.

var datePicker = new DatePicker({
  input: $('input'),
  trigger: $('button'),
  i18n: {
    'prevMonth': 'Previous month',
    'nextMonth': 'Next month',
    'monthName': [
      'January', 
      'February', 
      'March', 
      'April', 
      'May', 
      'June', 
      'July', 
      'August', 
      'September', 
      'October', 
      'November', 
      'December'
    ],
    'weekNameFull': [
      'Monday', 
      'Tuesday', 
      'Wednesday', 
      'Thursday', 
      'Friday', 
      'Saturday', 
      'Sunday'
    ],
    'weekNameShort': [
      'Mo', 
      'Tu', 
      'We', 
      'Th', 
      'Fr', 
      'Sa', 
      'Su'
    ],
    'currentDate': 'Current date',
    'selectedDate': 'Selected date',
    'currentMonth': 'Current month',
    'lastAvailableDate': 'Last available date',
    'firstAvailableDate': 'First available date',
    'notAvailable': 'Date is not available',
    'description': 'datepicker',
    'close': 'Close'
  }
});

datePicker.init();

Code

Dates which are out of range - disabled. You can not select them. Initially, datepicker accepts the date, which is out of range, but if you try to enter the date manually in the input field, it ignores that value.

If all dates of the previous month are disabled and there is no selected date at that month, appropriate navigation buttons are also disabled and you can not switch to that month.

var minDate = new Date();
minDate.setDate(
minDate.getDate() - 60
);

var maxDate = new Date();
maxDate.setDate(
maxDate.getDate() + 1
);

var selectedDate = new Date();
selectedDate.setDate(
selectedDate.getDate() - 90
);

var datePicker = new DatePicker({
  input: $('input'),
  trigger: $('button'),
  minDate: minDate,
  maxDate: maxDate
});

datePicker.init();

Code

By default date format is "dd.mm.yyyy". However datepicker support different date formats: mm/dd/yyyy, yyyy-m-d etc.

yyyy - is a 4 digit year, mm - 2 digits month, single m - 1 or 2 digits month, dd - 2 digits day, single d - 1 or 2 digits day.

var datePicker = new DatePicker({
  input: $('input'),
  trigger: $('button'),
  formatDate: 'mm/dd/yyyy'
});

datePicker.init();

Code

I had a task to add nice datepicker, which has all basic needs and a little bit more. I checked a lot of them, but each one had some issues. The best of those I saw, was a jQuery UI datepicker, but I don't like that it's too big and does not support keyboard navigation out of the box.

History:

1.3.0

Day name added to the button description. Screen reader reads it as April 3, 2017, Monday
Demo page was moved to another git repository
Fixed defect with vertical positioning
Added composer file
Added new method "destroy" which removes datepicker functionality.
Added new event onDestroy
Added button "Close" in the bottom which allows to close the datepicker. It's very convenient for mobile devices
Added button "Current date" which switch the date picker
When user closes the datepicker, focus goes back to trigger instead of input

1.2.1

Full responsive support

1.2.0

Ability to be read by screen readers: NVDA and chromevox

1.1.0

Added new event onDateFocus

Added keyboard navigation

Key	Action
Arrow left	next date
Arrow right	previous date
Arrow up	1 week back
Arrow down	1 week ahead
Home	first day of the month
End	last day of the month
Page up	1 month back
Page down	1 month ahead
Enter	select current date
Space	select current date
Esc	close the datepicker
Tab	next date until the end of the current month
Shift+Tab	previous date until the very first day of the month and to the buttons, which change month

1.0.0

Pick dates using mouse.
You can type the date manually. Datepicker highlights it in the calendar.
You can change dates using navigation buttons.
It support different date formats.
Allows to add you own events for the datepicker.
It can start the week with Monday.
You can use your own language.

Hevyweb datepicker

Simple example

Different events on date picker

It can start with Monday

Multi language support

Example with date range

Picker allows different date formats

A few words from author

History:

1.3.0

1.2.1

1.2.0

1.1.0

1.0.0