Minimal Clean Inline Date Picker – Hello Week

Preview:

Description:

Hello Week is a zero-dependency JavaScript plugin to create a nice clean multi-language inline calendar for date selection.

See also:

• Top 10 JavaScript & CSS Date And Timer Picker Components

How to use it:

Add references to the Hello Week’s JavaScript and CSS files.

<link href="dist/helloweek.css" rel="stylesheet">
<script src="dist/helloweek.min.js"></script>

The basic html structure for the calendar.

<div class="hello-week">
  <div class="hello-week__header">
    <button class="btn demo-prev">◀</button>
    <div class="hello-week__label"></div>
    <button class="btn demo-next">▶</button>
  </div>
  <div class="hello-week__week"></div>
  <div class="hello-week__month"></div>
</div>

Initialize the calendar with default settings.

const myCalendar = new HelloWeek();

Enable the prev/next buttons.

const prev = document.querySelector('.demo-prev');
const next = document.querySelector('.demo-next');

Get current, picked, and last picked dates.

<p><strong>Today:</strong> </p>
<ul class="demo-today"><span>n/a</span></ul>
<p><strong>Last Picked Day:</strong></p>
<ul class="demo-last"><span>n/a</span></ul>
<p><strong>Picked Days:</strong></p>
<ul class="demo-picked"><span>n/a</span></ul>

const today = document.querySelector('.demo-today');
const picked = document.querySelector('.demo-picked');
const last = document.querySelector('.demo-last');
function updateInfo() {
  if (this.today) {
    today.innerHTML = '';
    var li = document.createElement('li');
    li.innerHTML = this.today;
    today.appendChild(li);
  }
  if (this.lastSelectedDay) {
    picked.innerHTML = '';
    for (days of this.selectedDays) {
      var li = document.createElement('li');
      li.innerHTML = days;
      picked.appendChild(li);
    }
    last.innerHTML = '';
    var li = document.createElement('li');
    li.innerHTML = this.lastSelectedDay;
    last.appendChild(li);
  }
}
const myCalendar = new HelloWeek({
  onLoad: updateInfo,
  onChange: updateInfo,
  onSelect: updateInfo
});

Default plugin settings and callback functions to customize the calendar.

const myCalendar = new HelloWeek({
      selector: '.hello-week',
      lang: 'en',
      langFolder: './dist/langs/',
      format: 'dd/mm/yyyy',
      weekShort: true,
      monthShort: false,
      multiplePick: false,
      defaultDate: false,
      todayHighlight: true,
      daysSelected: null // ['2019-02-26', '2019-03-01', '2019-03-02', '2019-03-03']
      disablePastDays: false,
      disabledDaysOfWeek: false,
      disableDates: false,
      weekStart: 0, // 0 (Sunday) to 6 (Saturday).
      daysHighlight: false,
      range: false,
      rtl: false,
      locked: false
      minDate: false,
      maxDate: false,
      nav: ['◀', '▶'],
      onLoad: () => { /** callback function */ },
      onChange: () => { /** callback function */ },
      onSelect: () => { /** callback function */ },
      onClear: () => { /** callback function */ },
      beforeCreateDay: (node) => { /** callback function */ },
});

Create your own language strings just like the en.json.

{
    "days": [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
    ],
    "daysShort": [
        "Sun",
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat"
    ],
    "months": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    "monthsShort": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
    ]
}

API methods.

// change the month to the previous
myCalendar.prev();
// change the month to the next
myCalendar.next();
// update the calendar
myCalendar.update();
// reset the calendar
myCalendar.reset();
// destroy the calendar
myCalendar.destroy();
// move the calendar to the current day
myCalendar.goToday();
// move the calendar to a specified day
myCalendar.goToDate(date);
// get the selected days
myCalendar.getDays();
// get the highlighted dates
myCalendar.getDaysHighlight();
// set highlighted dates
myCalendar.setDaysHighlight(daysHighlight);
// set the multiple picker
myCalendar.setMultiplePick(Boolean);
// disable past days
myCalendar.setDisablePastDays(Boolean);
// highlight today
myCalendar.setTodayHighlight(state: Boolean);
// set range
myCalendar.setRange(Boolean);
// set locked
myCalendar.setLocked(state);
// set min/max dates
myCalendar.setMinDate(date: String | Number);
myCalendar.setMaxDate(date: String | Number);
// reset the picker
myCalendar.reset(options);

Changelog:

v2.14.2 (03/25/2023)

• Update

v2.13.1 (02/09/2023)

• Bug Fixes
• add beforeCreateDay callback

v2.13.0 (09/11/2022)

• Bug Fixes
• langs: add German languages

v2.10.3 (08/02/2022)

• Fixed range option.
• Fixed timezone.

v2.10.2 (05/19/2019)

• fix: update version.

v2.10.1 (05/09/2019)

• Fix issue setDayHighlight() method.

v2.10.0 (04/16/2019)

• update

v2.9.1 (03/29/2019)

• update

v2.9.0 (03/28/2019)

• added reset method

v2.6.0 (03/28/2019)

• feat: added method setMinDate and setMaxDate.

v2.5.0 (03/27/2019)

• Bugfix

v2.4.0 (03/23/2019)

• Fixed getDays() method.

v2.3.0 (03/19/2019)

• Fixed setDaysHighlight() method.

v2.2.0 (03/19/2019)

• Added Italian translation.
• FixedgoToDate() method.
• Added daysSelected option.

v2.0.0 (02/24/2019)

• Added method setRange toggle status of range.
• Added method setLocked set calendar locked.
• Added option rtl allows layout for languages written from right to left (like Hebrew or Arabic).
• Added option locked sets all days of the week locked.

Fixed month date range.

v1.5.0 (12/11/2018)

• update

v1.4.1 (6/18/2018)

• Spanish translation.
• Fix defaultDate option also minDate and maxDate.

v1.4.0 (5/24/2018)

• Option nav show next/prev buttons.

v1.3.2 (5/22/2018)

• Fix method used in option range to ignore dates lower than the first selected date.