Minimal Clean Inline Date Picker – Hello Week

Category: Date & Time , Javascript | March 25, 2023
Author:maurovieirareis
Views Total:905 views
Official Page:Go to website
Last Update:March 25, 2023
License:MIT

Preview:

Minimal Clean Inline Date Picker – Hello Week

Description:

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>
  <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.

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

    Reply
    1. Mauro Reis VIeira

      Big javascript file? 44.9 KB?

      And is not use any external file.

      Reply
  2. Evaluator

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

    Reply
  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.

    Reply

Leave a Reply