How to change the date format?

<input type="date" name="start_date" 
value="{{ $competition->start_date ? $competition->start_date->format('Y-m-d') : '' }}" 
class="form-control @error('start_date') is-invalid @enderror" id="inputStart_date" 
placeholder="Enter Start Date">

This line returns the date in this format mm/dd/yyyy. Even though that it's format('Y-m-d'). And format('Y/m/d') does not work. Any ideas how to convert it to 'Y/m/d'?

LaryAI

3 years ago

Level 58

The issue is that the input type "date" automatically formats the date in the "mm/dd/yyyy" format, regardless of the format specified in the PHP code. To display the date in the desired format, you can use JavaScript to format the date after it is loaded into the input field.

Here's an example of how to do this using jQuery:

$(document).ready(function() {
  // Get the value of the input field
  var startDate = $('#inputStart_date').val();
  
  // Convert the date to the desired format
  var formattedDate = moment(startDate, 'YYYY-MM-DD').format('YYYY/MM/DD');
  
  // Set the value of the input field to the formatted date
  $('#inputStart_date').val(formattedDate);
});

This code uses the Moment.js library to convert the date to the desired format. You'll need to include the Moment.js library in your project for this code to work.

Alternatively, you can use the HTML5 date input with a custom format. Here's an example:

<input type="text" name="start_date" value="{{ $competition->start_date ? $competition->start_date->format('Y-m-d') : '' }}" class="form-control @error('start_date') is-invalid @enderror" id="inputStart_date" placeholder="Enter Start Date" pattern="\d{4}/\d{2}/\d{2}" title="Enter a date in the format YYYY/MM/DD">

This code uses a regular expression pattern to enforce the format "YYYY/MM/DD" on the input field. The "title" attribute provides a hint to the user about the expected format. Note that this approach will not work in all browsers, so you may need to use a JavaScript solution as well.

Snapey

3 years ago

Level 122

Read the this. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

The value returned by the browser should always be YYYY-MM-DD

Are you sure you are interpreting the response correctly?

Yorkata

3 years ago

Level 1

@Snapey how to make sure of it?

Snapey

3 years ago

Level 122

dump the request data dd($request->all());

Also check what the browser sends in the developer tools network tab

imawesome

3 years ago

Level 1

Date is showed in the format of browser language inside the browser with the HTML input of type date. If the language set is en-us the format displayed will be mm/dd/yyyy. If the language set is japanese then the format will be yyyy/mm/dd.

You can try using JQuery UI date picker.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Format date</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker" size="30" value="1993-12-27"></p>
 
</body>
</html>

1 like

Please or to participate in this conversation.