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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helpdocs.quickadminpanel.com/create-panel/date-time-picker-fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.