Category: Web Design

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.


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

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.


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



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.



Doesn't work well with bootstrap.



In my case I avoided the fancies and kept with jquery-ui-datepicker.

It does everything I need.

For the ranged datepicker I went with flatpickr as opposed to react-dates. It works really well, here is a screenshot below:

Specificity: Why my CSS is being cancelled out even though it is loaded after other CSS?

Your answer is Specificity

Specificity is a mechanism within the CSS cascade that aids conflict resolution

Basically it determines preference of CSS styles, over and above the cascading nature of stylesheets

Order of Precedence of Specificity:

Type Specificity
Inline Style Highest
Highest Number of #id selectors Wins
Highest number of class, attribute and pseudo selectors Wins
Highest Number of element selectors Wins

HTML Forms and Submit Button Changing Name

This article explores HTML webforms and specifically the submit button in terms of changing the name, id and value. We explore Submit Button Changing Name Examples.

Example 1: Simple form tags and a frugal submit input


<input type="submit" />


Result 1: Submit label is 'Submit', Default action is to do a Get.

Example 2: Simple form with post method and frugal submit

<form method='post'>
<input type='submit'>

Result 2: Submit label is 'Submit', Does a Post with no form data.

Example 3: Simple Form with Post and submit with id

<form method='post'>
<input type='submit' id='test'>

Result 3:  Submit is still called submit, Does a Post with no form data.

Example 4: Simple Form with Post and Submit with a Name

<form method='post'>
<input type='submit' name='test'>

Result 4:  Submit is still Submit, Does Post that contains form data: $_POST['test'] = 'Submit';

Example 5: Simple Form with Post Submit with a Name and a Value

<form method='post'>
<input type='submit' name='test' value='foo'>

Result 5: Submit is now labelled 'foo', does a post of form data: $_POST['test'] = 'foo';

Example 6: Simple Form with Post Submit with a Value Attribute

<form method='post'>
<input type='submit' value='foo'>

Result 6: Submit labelled foo, but no form data.