> For the complete documentation index, see [llms.txt](https://helpdocs.quickadminpanel.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdocs.quickadminpanel.com/create-panel/date-time-picker-fields.md).

# Date/Time Picker Fields

## How it Looks

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

![](/files/-MRxU2L36yPSwCBUqNTq)

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

![](/files/-MRxV5wLrrkgbIa6rv_q)

**Date/Time Picker:**

![](/files/-MRxVDSwY2_t2aGgNS4c)

**Time Picker:**

![](/files/-MRxZAVpi2zdrC0oxOw4)

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

![](/files/-MRy8aFRBhHRvAsvzg3M)

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