datepickercover

We all have to make forms in html or php from time to time.  Recently I can across the issue where I inserted a date field for birthdays and then the user had to type the date manually.  This is very bad UX since there is a possibility of formatting errors and the user simply not motivated to type out a whole date range.  Get all the datepicker option below.

Datepicker option is best

So a pop-out datepicker is the best option since it gives the user a graphic interface and the formatting happens from the browser side.  And it works well on mobile.

Get the demo and all the possible coding options from https://jqueryui.com/datepicker.  The highlight that I found most useful are below.

Datepicker code

So you have code below.  Add it at the top of the page or form or in the header of your page.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#contact_birth_date" ).datepicker();
} );
</script>
Your #datepicker is your form input field.  So your can change that how it appears in your database or form.

Styling your Datepicker

Remove any form styles that exist on your form so that there are no CSS that clash..  And insert these two links to style sheets.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Year range for your picker

So you want to add the year range to your datepicker.  See the highlighted code below.

$( function() {
$( “#contact_birth_date” ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: ‘1950:2013’
    });
} );

This lets users to choose year and month from a drop down. See below.

datepickeryear

More options

Get the demo and all the possible coding options from https://jqueryui.com/datepicker.

Save

Save

Save

Save