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?
PeterErhardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Not with HTML but if you can use jQuery there are a number of date plugins available.
Assuming a dropdown is not acceptable...
0
PeterErhardAuthor Commented:
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
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dave BaldwinFixer of ProblemsCommented:
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.
0
PeterErhardAuthor Commented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
GaryCommented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
GaryCommented:
Except its barely supported padas
0
PeterErhardAuthor Commented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Dave BaldwinFixer of ProblemsCommented:
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.
0
PeterErhardAuthor Commented:
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

0
GaryCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PeterErhardAuthor Commented:
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

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
PeterErhardAuthor Commented:
Thanks padas, I see you said no points, so I'll give them to Gary.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.