# Date/Time Picker Fields

## How it Looks

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

![](https://3430351544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7hdtfDr4t_C1ptQgyo%2F-MRxRoRjOyCi6CZflmoQ%2F-MRxU2L36yPSwCBUqNTq%2FScreenshot%202021-01-26%20at%2008.57.29.png?alt=media\&token=6053cb82-efb5-4159-be78-f93ce8c8c5ab)

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

![](https://3430351544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7hdtfDr4t_C1ptQgyo%2F-MRxRoRjOyCi6CZflmoQ%2F-MRxV5wLrrkgbIa6rv_q%2FScreenshot%202021-01-26%20at%2009.02.32.png?alt=media\&token=aef43f19-c7b1-4f5d-bad5-15bd0e082b3d)

**Date/Time Picker:**

![](https://3430351544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7hdtfDr4t_C1ptQgyo%2F-MRxRoRjOyCi6CZflmoQ%2F-MRxVDSwY2_t2aGgNS4c%2FScreenshot%202021-01-26%20at%2009.03.03.png?alt=media\&token=61d0c0ea-4fd8-4513-b210-28046e9be375)

**Time Picker:**

![](https://3430351544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7hdtfDr4t_C1ptQgyo%2F-MRxRoRjOyCi6CZflmoQ%2F-MRxZAVpi2zdrC0oxOw4%2FScreenshot%202021-01-26%20at%2009.05.25.png?alt=media\&token=9cf1ec1d-d0cc-4d3a-9959-746717ca1253)

## How It Works

To make those pickers work, we're loading a [Bootstrap Date/Time Picker library](https://github.com/Eonasdan/tempus-dominus) 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](https://momentjs.com/) 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:

![](https://3430351544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7hdtfDr4t_C1ptQgyo%2F-MRxgYvpRkA6l_v7UAgd%2F-MRy8aFRBhHRvAsvzg3M%2FScreenshot%202021-01-26%20at%2012.03.43.png?alt=media\&token=6bed5ae7-3cfd-4dfa-9629-b210c290d6cc)

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.&#x20;

Keep in mind that JavaScript formats are powered by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/), and Laravel formats are powered by the [PHP date() function](https://www.php.net/manual/en/datetime.format.php).&#x20;

### **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'
```