asked on

Need SIMPLE Datepicker in Javascript

Hello,

I have a form that needs to have ten dates entered. I would like to have a SIMPLE script that could be made to have the end use enter a valid date. Most like JavaScript would be better for this app.

Thanks!
Scott

guru_sami

Check this out: http://jqueryui.com/demos/datepicker/

HonorGod

Please define "valid" dates

- Must they be in a specific order?
- Must they be specific days of the week?
- Are holidays allowed?
- Is there a specific ranges for these valid dates?

https://www.experts-exchange.com/articles/Programming/Languages/Scripting/JavaScript/Can-I-have-a-date.html

IRHusker

ASKER

By valid I mean in something like the mm/dd/yyyy format to be inserted into SQL.

Thanks!

remorina

Hi IRHusker,
You can try the jquery ui datepicker and adjust the date format, local, etcc.

I've attached an example below which uses the datepicker and inserts the date with your required format

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>jQuery UI - Datepicker</title>
	<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {font:normal 12px Arial, Helvetica, Serif;}
    </style>
</head>

<body>
    <script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker();
		$.datepicker.setDefaults($.datepicker.regional['']); 
		$.datepicker.formatDate('mm-dd-yyyy');
	});
    </script>
    <div class="demo">
        <p>
            Date:
            <input type="text" id="datepicker" />
        </p>
    </div>
    <div>
        <p>
            The datepicker is tied to a standard form input field. Focus on the input (click,
            or use the tab key) to open an interactive calendar in a small overlay. Choose a
            date, click elsewhere on the page (blur the input), or hit the Esc key to close.
            If a date is chosen, feedback is shown as the input's value.</p>
    </div>
</body>
</html>

Open in new window

jquery-date-picker.htm

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

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

Start Free Trial

IRHusker

ASKER

Thanks!

HonorGod

You are very welcome.

Thanks for the grade & points.

Good luck & have a great day.