Date/Time Picker Fields

How it Looks

We have three field types related to date and/or time:

To make the input more convenient, we use a jQuery library called Datetimepicker, to power all of them. Here's how it looks visually.

Date Picker:

Date/Time Picker:

Time Picker:

How It Works

To make those pickers work, we're loading a Bootstrap Date/Time Picker library directly from CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

...

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Notice: that library is now renamed to "Tempus Dominus" and is in process of creating a new version, but we're using older and stable v4.17.

We also load the Moment.js library from CDN, which helps with time manipulation in JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

Then, in the file public/js/main.js we have this jQuery code to enable pickers:

  moment.updateLocale('en', {
    week: {dow: 1} // Monday is the first day of the week
  })

  $('.date').datetimepicker({
    format: 'MM/DD/YYYY',
    locale: 'en',
    icons: {
      up: 'fas fa-chevron-up',
      down: 'fas fa-chevron-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right'
    }
  })

  $('.datetime').datetimepicker({
    format: 'MM/DD/YYYY HH:mm:ss',
    locale: 'en',
    sideBySide: true,
    icons: {
      up: 'fas fa-chevron-up',
      down: 'fas fa-chevron-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right'
    }
  })

  $('.timepicker').datetimepicker({
    format: 'HH:mm:ss',
    icons: {
      up: 'fas fa-chevron-up',
      down: 'fas fa-chevron-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right'
    }
  })

So, in Blade files, every picker input field has its class, like <input class="date" />, or <input class="datetime" />, or <input class="timepicker" />.

How to Configure/Customize

The most typical customization is changing the date/time formats. I will show you two examples.

First, you can configure your date format in the panel settings:

After downloading the code, you can also make the changes. Besides the date formats you can see in the previous code sample (like, "format: 'MM/DD/YYYY HH:mm:ss'"), we also have the configuration on the back-end of Laravel, to convert the dates to/from the database.

So, here's config/panel.php:

return [
    'date_format' => 'm/d/Y',
    'time_format' => 'H:i:s',
    
    // ... other parameters
];

So, if you want to change the formats, you need to change them both in JavaScript, and in Laravel.

Keep in mind that JavaScript formats are powered by Moment.js, and Laravel formats are powered by the PHP date() function.

Example 1. 12-hour Clock instead of a 24-hour Clock

To use hours like "3pm" instead of "15", you need to make these changes:

config/panel.php:

return [
    'date_format' => 'm/d/Y',
    'time_format' => 'h:i A',   // changed from 'H:i:s'

public/js/main.js:

$('.datetime').datetimepicker({
    format: 'MM/DD/YYYY hh:mm A',   // changed from 'MM/DD/YYYY HH:mm:ss'

Example 2. Don't Display Seconds

If you want to skip seconds in datetime/time picker, here are the changes to make:

config/panel.php:

return [
    'date_format' => 'm/d/Y',
    'time_format' => 'H:i',   // changed from 'H:i:s'

public/js/main.js:

$('.datetime').datetimepicker({
    format: 'MM/DD/YYYY HH:mm',   // changed from 'MM/DD/YYYY HH:mm:ss'