I’m trying to use the date picker from http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html
to fill in a field on my form. How ever after a long time of trying I’m still unsuccessful at it. You can see my form here.
http://www.vzapper.com/Medical-Journal/form1.html
Any advice would be appreciated.
Here’s my page if you want to see it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/datePicker.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<!-- required plugins -->
<script type="text/javascript" src="js/date.js"></script>
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="js/jquery.datePicker.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#commentForm").validate({
rules: {
generalhealth: {
number: true,
required: true,
range: [0, 10]
},
stress: {
number: true,
required: true,
range: [0, 10]
},
depression: {
number: true,
required: true,
range: [0, 10]
},
tiredness: {
number: true,
required: true,
range: [0, 10]
},
comfort: {
number: true,
required: true,
range: [0, 10]
},
appetite: {
number: true,
required: true,
range: [0, 10]
}
},
messages: {
date: {
required: "Please enter the date. ie (yyyy-mm-dd).",
maxlength: "Must consist of only 2 number"
},
generalhealth: {
required: "Please enter your general health.",
maxlength: "Must consist of only 2 number"
},
stress: {
required: "Please provide your stress level",
maxlength: "Must consist of only 2 number"
},
depression: {
required: "Please enter your depression level",
maxlength: "Must consist of only 2 number"
},
tiredness: {
required: "Please enter tiredness level",
maxlength: "Must consist of only 2 number"
},
comfort: {
required: "Please enter your comfort level",
maxlength: "Must consist of only 2 number"
},
appetite: {
required: "Please enter provide your appetite level",
maxlength: "Must consist of only 2 number"
}
}
});
$(function()
{
$('.date-pick').datePicker();
});
});
</script>
<style type="text/css">
fieldset {
margin: 0.5em ;
padding: 2px;
border: 1px solid #BFBAB0;
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
padding: 4px;
}
fieldset ol {
padding: 1em 1em 0 1em;
list-style: none;
padding: 4px;
}
fieldset li {
padding-bottom: 0.5em;
}
fieldset.submit {
border-style: none;
}
label {
display: block;
}
label em {
display: block;
background-color: transparent;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
#wrapper {
width: 800px;
text-align: left;
margin: 10px auto;
padding: 0px -1px 0px 0px;
border: solid 1px #E0E0E0;
background-color: #FFFFFF;
}
label.error { float: right; color: red; padding-left: .5em; vertical-align: top; }
.error{
background-color: Pink;
}
</style>
</head>
<body>
<!-- http://articles.sitepoint.com/article/fancy-form-design-css/3 -->
<div id="wrapper">
<form id="commentForm" action="" method="">
<fieldset>
<legend>Date</legend>
<p>Instructions: <br>Fill out the following sections.</p>
<ol>
<li>
<label for="date">Todays Date:<!-- <em>required</em> --></label><input class="date-pick" id="date1" type="text" name="date1"/> Example: 2010-02-18 (yyyy-mm-dd)
</li>
<li>
<label for="day">Day of the Week:</label><input type="text" name="day"/> Example: Monday
</li>
</ol>
</fieldset>
<fieldset>
<legend>Feelings</legend>
<p>Instructions: <br>Fill out the following section using a scale of 1 thru 10 (one being low, 10 being high). Please be as accurate as possible. </p>
<ol>
<li>
<label for="generalhealth">Today was a:</label><input type="text" name="generalhealth"/> Give a general all-round rating to the day (1 - 10)
</li>
<li>
<label for="stress">Stress Level:</label><input type="text" name="stress"/> Was today a stressful day? (1 - 10)
</li>
<li>
<label for="depression">Depression Level:</label><input type="text" name="depression"/> Were you depressed today? (1 - 10)
</li>
<li>
<label for="tiredness">Tiredness Level:</label><input type="text" name="tiredness"/> How tired were you? (1 - 10)
</li>
<li>
<label for="comfort">Comfort Level:</label><input type="text" name="comfort"/> How comfortable were you? (1 - 10)
</li>
<li>
<label for="appetite">Appetite:</label><input type="text" name="appetite"/> How was your appetite? (1 - 10)
</li>
</ol>
</fieldset>
<fieldset>
<legend>Medications</legend>
<p>Instructions: <br />Fill out to the best of your knowledge.</p>
<ol>
<li>
<label for="weight">Current Weight:</label><input type="text" name="weight"/> Example: 167
</li>
<li>
<label for="morphine">Drug 1:</label><input type="text" name="morphine"/> How many pills did you take? (use a number)
</li>
<li>
<label for="hydrocodone">Drug 2:</label><input type="text" name="hydrocodone"/> How many pills did you take? (use a number)
</li>
<li>
<label for="note">Add Note:</label><input type="text" name="note"/> Add a short note.
</li>
</ol>
</fieldset>
<p>Check: <br />Please check that your answers are correct and then click the "Add Your Data" button.<br /> <input type="submit" /> </p>
</form>
</div>
</body>
</html>
got it closer. 