asked on

Date Format on an HTML Form

On a form I have a From Date textbox and a To Date textbox that need to accept dates anywhere from 1800 to 2013.

What would the best way be of making it easy for users to enter the date range they desire?

Gary

Not with HTML but if you can use jQuery there are a number of date plugins available.
Assuming a dropdown is not acceptable...

PeterErhard

ASKER

Sorry, jQuery is fine.

I'm wanting to avoid the usual date picker window that appears though, because someone could enter a date range from 1901 to 1957 and scrolling through someone like these would be a nightmare:

http://blog.teamtreehouse.com/best-jquery-date-picker-plugins-for-input-fields

Gary

http://jqueryui.com/datepicker/#dropdown-month-year

Dave Baldwin

The best way is probably a drop-down box with all 213 acceptable dates listed. You could just make it a text input and let them type it in. What application and/or programming language are you sending this to? If you send it as just a number it won't matter but if you want to handle it as a 'real' date it might. Different date methods have varying restrictions.

PeterErhard

ASKER

Thanks for the link Gary.

Thanks for the suggestion Dave - something such as DD (drop down), MM (drop down), YY (drop down) is what you're suggesting?

It will be passed through to a php page and used as a part of a query to return data.

Scott Fell

No jquery, js, serverside needed with html5. http://www.w3.org/TR/html-markup/datatypes.html#form.data.date

sample based on below http://jsbin.com/EkEtido/1/edit

  <input type="date" min="1800-1-1" max="2013-12-31">

Open in new window

Gary

You get that with the jQuery datepicker, you just have to set the year range in the init script then you have the month/year dropdown and it automatically adjusts the datepicker.
No need for separate dropdowns.

Scott Fell

I actually like the jquery datepicker and use it many times. Just recently started using the input type="date". It works nicely across devices like ios and android.

Gary

Except its barely supported padas

PeterErhard

ASKER

Thanks padas, but so far I like Gary's option the best.

I'll leave this open a little longer in case anyone else has any suggestions.

Thanks.

Scott Fell

I agree. The only variations that improves it will have to do with custom css based on your own format. I do a lot of database projects and have made very good use out of jquery datepicker.

Dave Baldwin

If you're doing DD-MM-YYYY, it's much better to do a drop-down or just about any method that restricts the input to something manageable. Even strtotime() can't handle some of the things that people will enter if you don't control it.

PeterErhard

ASKER

Dave - do you have an example of what you mean?

Gary - I'm looking at this one - http://jqueryui.com/datepicker/#dropdown-month-year

I can't see how you specify the years, i.e. show from 1800 to now. Does anyone know how you do that?

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker" /></p>
 
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PeterErhard

ASKER

Thanks Gary, but doesn't seem to work. As soon as I put the yearRange in nothing happens

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#DateFrom" ).datepicker({
      changeMonth: true,
      changeYear: true,
    [b]  $( ".selector" ).DateFrom( "option", "yearRange", "2002:2013" );[/b]
    });
    $( "#DateTo" ).datepicker({
      changeMonth: true,
      changeYear: true,
[b]      $( ".selector" ).DateFrom( "option", "yearRange", "2002:2013" );[/b]
    });



  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="DateFrom" /></p>
<p>Date: <input type="text" id="DateTo" /></p>

</body>
</html>

Open in new window

Scott Fell

No points. I'm not sure where you picked up the [ b ][ /b ] unless that is something I am not aware. But this works.
http://jsbin.com/Inoxeqa/1/edit

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script>	
 $(function() {
    $( ".mydate" ).datepicker({ changeMonth: true,changeYear: true,yearRange: "1800:2013" });
    $( ".mydate2" ).datepicker({ changeMonth: true,changeYear: true,minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input type="text" class="mydate">
   <input type="text" class="mydate2">
</body>
</html>

Open in new window

PeterErhard

ASKER

Thanks padas, I see you said no points, so I'll give them to Gary.