Category: Javascript

Finding a Frontend tool: An Inline Smart Datepicker

I am working on a project that requires an inline smart datepicker. So in this post I will show the process of selecting a decent plugin / tool.

Requirements

The Inline smart datepicker is quite simple and simple is better than complex so I want to keep it that way:

  • Must not pop-up, it should be static and inline on the page
  • Ability to change colour/ style / state of certain dates for public holidays and weekends
  • Events can be assigned to certain dates to show warnings to the user
  • Work on at least internet explorer 11
  • Works well and looks good on mobile

It is always good to write the checklist of requirements down. Keep it as small as possible, so you are not distracted by the nice-to-have.

Finding tools

A good starting place is searching on a search engine. You can use multiple similar search terms like: frontend inline datepicker, html datepicker static and best jquery datepickers

You will find the 30 best datepicker sites and such which help alot. Another good resource is github, just type in datepicker and order by stars. Making sure to avoid the android and iOS options, for that make sure you choose javascript

Now it is just a task of going through the demos and documentation and seeing if the datepickers meet the criteria above.

Shortlist

Shortlist some options that meet your criteria:

  • Zebra Datepicker – Meets all the requirements. Can put custom classes on dates and has events for dates
  • Jquery Datepicker – Meets all the requirements. Can add custom css class name to a date cell and a tooltip which would provide a good extra for informing users about why a date is coloured that way with beforeShowDay
  • Zobuto Datepicker – Meets all the requirements. Has a legend of colours on the chart for more specific info. Has modal popups which is useful for public holidays and leave days for example.
  • glDatepicker – Meets all requirements.
  • Air Datepicker – Meets all requirements. Supports custom cell content and events.

Some that missed:

  • FlatPicker – Colouring and styling individual dates
  • Vue-js Datepicker – Demo broken
  • PickMeUp – Too simple, no colouring
  • PersianDatepicker – For specific language…Persian
  • Datepicker for Bootstrap – Documentation lacking so no individual style elements
  • FullCalendar.io – Overkill for requirements
  • app-datepicker component – Looks nice, but no docs for events and stying individual dates
  • clndr – Styling individual dates can’t be done
  • Rome – Inability to style individual dates
  • Datepicker – has muted class which can act as public holiday, weekends and leave days. It does have events on clicking a date like most do. Does not fully meet styling requirements.
  • e-calendar – Insufficient docs and demos

Selecting the best of the bunch

Now that you have a shortlist take some time reading through the docs and start playing with the libraries.

It is time to choose the extension or plugin with the best docs and the best in your opinion.

Zobuto

I liked zobuto because it worked with and needed resources already in my project bootstrap and jquery. The problem is that it is not an input element…so you have to ensure a date is initialised and linked to an input element in a form. Also initializing the date becomes a bit tricky and it not something I want to explicitly handle.

Also weekends can only be coloured with the data attribute.

Otherwise it works really well. So I have added it to the project in another branch and want to try some of the others out.

It also looks a lot better than some of the others.

 

zabuto-datepicker

Zebra Datepicker

Is limited to the bootstrap style and can’t really display richer information. You can add styling to weekends and it works more like an input but feels a bit more limited.

zebra-datepicker-always-shown

glDatepicker

Doesn’t work well with bootstrap.

gldatepicker-bootstrap-problem

 

Why Javascript is not Working in Head Tag?

Why my javascript is not working in Head Tag?

Have you been frustrated, and wonder why the javascript in your <head> tag is not working? Why javascript is not working in head tag?

You must keep in mind that the position of your javascript within the code MATTERS.

Your javascript’s code position with respect to the HTML elements they use, MATTERS.

The javascript code or script (inline or referenced) must be placed below the DOM object (HTML element) is uses or references. Javascript cannot effect the DOM on elements that have not been loaded, so you have to make sure they are loaded first!

Possible Solutions

1. Place the script below the DOM object (HTML element) it uses or references.

ie. The script block must be included at any point after the HTML element tag in the source code of the page.

2. Use window.onload function:

Call the javascript inside the <head> section, but in this case you will need to listen for the window.onload event as follows:

<script>
window.onload = function() {
{{{{{javascript code goes here}}}}}
};
</script>

This function waits until the entire page is loaded before the javascript code is executed.

Javascript not working