Minimal Clean Inline Date Picker – Hello Week

Category: Date & Time , Javascript | March 25, 2023
Views Total:1,373 views
Official Page:Go to website
Last Update:March 25, 2023


Minimal Clean Inline Date Picker – Hello Week


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

See also:

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 class="hello-week__week"></div>
  <div class="hello-week__month"></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 ( {
    today.innerHTML = '';
    var li = document.createElement('li');
    li.innerHTML =;
  if (this.lastSelectedDay) {
    picked.innerHTML = '';
    for (days of this.selectedDays) {
      var li = document.createElement('li');
      li.innerHTML = days;
    last.innerHTML = '';
    var li = document.createElement('li');
    li.innerHTML = this.lastSelectedDay;
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": [
    "daysShort": [
    "months": [
    "monthsShort": [

API methods.

// change the month to the previous
// change the month to the next;
// update the calendar
// reset the calendar
// destroy the calendar
// move the calendar to the current day
// move the calendar to a specified day
// get the selected days
// get the highlighted dates
// set highlighted dates
// set the multiple picker
// disable past days
// highlight today
myCalendar.setTodayHighlight(state: Boolean);
// set range
// set locked
// set min/max dates
myCalendar.setMinDate(date: String | Number);
myCalendar.setMaxDate(date: String | Number);
// reset the picker


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.

You Might Be Interested In:

8 thoughts on “Minimal Clean Inline Date Picker – Hello Week

  1. bob

    This is no good, way too big javascript file and loads external files from other cdn’s

    1. Mauro Reis VIeira

      Big javascript file? 44.9 KB?

      And is not use any external file.

  2. Evaluator

    Doesn’t work on iPhone 5. Looking for something that is compatible with most devices.

  3. ysn

    I found 3 problems. but i am a beginner so correct me if i am wrong
    1 There is no ‘dist’ where the style and js is stored
    2 1 seems solved in the 3.x version which i found from ur github. but the style contains a ‘.’ not just helloweek.css but hello.week.css this also applies for the js file.
    3 After correcting all this, i managed to disiplay the calendar but it wasnt styled. for e.g the present day is not marked, unavailable and available dates are not marked. they are all white.


Leave a Reply