Member Avatar for dragonflyuk

I've got 3 date fields on a form, each is set using the standard datetimepicker.js, however I have set the resulting text field to readonly to prevent users entering silly date formats into the field.

However the 3 fields must be in the correct order i.e. datetime1 must be before datetime2 and datetime2 must be before datetime3

The datefields are defined as below

<span style='white-space:nowrap'><input style="background:#fff" readonly id='readytime' name='readytime' type='text' size='15' value='<?php echo date("d-m-Y H:i"); ?>'><a href="javascript:NewCal('readytime','ddmmyyyy',true,24)"><img src='images/cal.gif' width='16' height='16' border='0' alt='Pick a date'></a></span><br>

Can anybody suggest a way of checking the dates whenever one changes onchange appears not to work on a readonly field??

Also what the best way to compare date strings (in a britsh format dd-mm-yyyy hh:mm) in javascript?

  • 3 Contributors
  • 2 Replies
  • 2K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 2 Replies

Member Avatar for kburb23

I think datetimepicker should have it's own custom onchange event callback - so I would use that instead of trying to use the onCHange on the form

Member Avatar for essential

Here's a little example on how to deal with the readonly field! And date format should be like this ( dd-mm-yyyy ) before it react!

<html>
<head>
<title><!--Sample--></title>
<script type="text/javascript">
<!--
var dateValue = /^[d]{2}[\-\.]{1}[m]{2}[\-\.]{1}[y]{4}$/; 
window.onload = function() {
form1.txt1.onchange = function()  { if ( dateValue.test( form1.txt1.value )) { 
var today = new Date();
var date = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
date = ( date < 10 ? '0' : '' ) + date;
month = ( month < 10 ? '0' : '' ) + month;
form1.readytime.value = ' ' + date + '-' + month + '-' + year;
 } else { alert('Invalid Date Format'); return false; } 
}; 
form1.txt1.onfocus = function() { form1.readytime.readOnly = false; }   
form1.txt1.onblur = function() { form1.readytime.readOnly = true; }   

}
//-->
</script>
</head>
<body>
<form name="form1">
<label>Date Format:&nbsp;<input type="text" name="txt1"  value="" size="15" /></label><br /><br />
<label>Date Picker:&nbsp;&nbsp;<input type="text" name="readytime" size="15" value="" readonly /></label>
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.