3

Is there a way to convert a text type input field to a date type one with jQuery, so it will display to the user a date picker? I can add custom fields to a form created by a Wordpress plugin, but it doesn't support date nor datetime-local field types, and I need a such one.

<input name="adverts_eventDate" id="adverts_eventDate" type="text">
Yurié
  • 2,148
  • 3
  • 23
  • 40

3 Answers3

5

You can easily change the type in jQuery:

$("#adverts_eventDate").attr("type","date");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">

You can't change date format in HTML5 date:

Is there any way to change input type="date" format?

Since you can't change your date format in HTML5, I would recommend jQuery-UI.

Here's an example:

$( function() {
    $( "#adverts_eventDate" ).datepicker();
  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input name="adverts_eventDate" id="adverts_eventDate" type="text"></p>
Community
  • 1
  • 1
Neil
  • 14,063
  • 3
  • 30
  • 51
  • instead of 3/4/16 try to use some format that makes immediately clear what's *date* and what's *month*... *year*... ya?! – Roko C. Buljan Mar 13 '17 at 17:31
  • Like March 4th, 2016? – Neil Mar 13 '17 at 17:33
  • If you use i.e: `28`, or at least `13` for the date, noone will ever make a bug. If you use 4... who knows what that 4 is. There are loooooots of date formats all over the world... you know?! – Roko C. Buljan Mar 13 '17 at 17:36
  • Yeah. Good point. I'll see what the the OP wants before I update it. (I did remove the incorrect statement). – Neil Mar 13 '17 at 17:39
  • And `Date` is pretty stupid to decipher them all. (That's why we have Moment.js where you can define literally the desired format etc...) – Roko C. Buljan Mar 13 '17 at 17:42
  • ...and the way I interpret the question, this is all irrelevant :) – freedomn-m Mar 13 '17 at 17:43
  • The expected date format for my country (Moldova) is `day.month.year` or `day-month-year`. – Yurié Mar 13 '17 at 17:59
  • @nfnneil This example works! Thank you very much! I will test it on my form a little later. Best regards! – Yurié Mar 13 '17 at 18:24
  • @nfnneil ... I meant that the second solution/example is what I needed. I tested it with my form and now I have a date picker! Thank you very much! – Yurié Mar 13 '17 at 20:00
2

convert a text type input field in a date type

You can use jquery's attr to change the type attribute from text to date.

$("#convert").click(function() {
  $("#adverts_eventDate").attr("type", "date")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">
<button id='convert'>to date</button>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
2

You can use jquery-ui as follows

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">       </script>
<input name="adverts_eventDate" id="adverts_eventDate" type="text">

and then 

<script>
  $( function() {
    $( "#adverts_eventDate" ).datepicker();
  } );
  </script>
Birhan Nega
  • 663
  • 12
  • 24