Minimal Clean Inline Date Picker – Hello Week

Category: Date & Time , Javascript | June 18, 2018
Author: maurovieirareis
Views Total: 1,629
Official Page: Go to website
Last Update: June 18, 2018
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.

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: false,
      weekShort: true,
      monthShort: false,
      multiplePick: false,
      defaultDate: false,
      todayHighlight: true,
      disablePastDays: false,
      disabledDaysOfWeek: false,
      disableDates: false,
      weekStart: 0,
      daysHighlight: false,
      range: false,
      minDate: false,
      maxDate: false,
      nav: ['◀', '▶'],
      onLoad: () => { /** callback function */ },
      onChange: () => { /** callback function */ },
      onSelect: () => { /** callback function */ },
      onClear: () => { /** 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"
    ]
}

Changelog:

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.

4 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

Leave a Reply