How to display a date field but read only?? [Archive]

ashas

09-25-2003, 02:31 AM

HI All,

I have a date field that I want to display as read only... I don't know how to do this..

I have tried displaying the Label value but this displays the date in a really strange format i.e D/2003/9/9:0:0:0

This is how I am trying to display the date field currently:
<INPUT TYPE="text" NAME="_1_1_6_1" VALUE="[LL_FormTag_1_1_6_1 /]" size="20" onfocus="this.blur();">

Below is the date field I would like to display as read only..

Hope someone knows how I can do this!

Thanks!

<TD NOWRAP BGCOLOR="#CCCCCC" ALIGN="LEFT" VALIGN="MIDDLE">
 <FONT SIZE="-1" FACE="Arial,Helvetica,sans-serif">Date Request Received:</FONT>
 
</TD>
<TD NOWRAP>

<INPUT TYPE="HIDDEN" NAME="_1_1_6_1" VALUE="[LL_FormTag_1_1_6_1 /]">
<LABEL FOR="_1_1_6_1_day"></LABEL>
<SELECT ID="_1_1_6_1_day" NAME="_1_1_6_1_day" onChange="_1_1_6_1_update(this, this.form, null)">
<OPTION VALUE="-1" SELECTED></SELECT>
<LABEL FOR="_1_1_6_1_month"></LABEL>
<SELECT ID="_1_1_6_1_month" NAME="_1_1_6_1_month" onChange="_1_1_6_1_update(this, this.form, null)">
<OPTION VALUE="-1" SELECTED>
<OPTION VALUE="1" >January
<OPTION VALUE="2" >February
<OPTION VALUE="3" >March
<OPTION VALUE="4" >April
<OPTION VALUE="5" >May
<OPTION VALUE="6" >June
<OPTION VALUE="7" >July
<OPTION VALUE="8" >August
<OPTION VALUE="9" >September
<OPTION VALUE="10" >October
<OPTION VALUE="11" >November
<OPTION VALUE="12" >December
</SELECT>
<LABEL FOR="_1_1_6_1_year"></LABEL>
<SELECT ID="_1_1_6_1_year" NAME="_1_1_6_1_year" onChange="_1_1_6_1_update(this, this.form, null)">
<OPTION VALUE="-1" SELECTED>
<OPTION VALUE="1990" >1990
<OPTION VALUE="1991" >1991
<OPTION VALUE="1992" >1992
<OPTION VALUE="1993" >1993
<OPTION VALUE="1994" >1994
<OPTION VALUE="1995" >1995
<OPTION VALUE="1996" >1996
<OPTION VALUE="1997" >1997
<OPTION VALUE="1998" >1998
<OPTION VALUE="1999" >1999
<OPTION VALUE="2000" >2000
<OPTION VALUE="2001" >2001
<OPTION VALUE="2002" >2002
<OPTION VALUE="2003" >2003
<OPTION VALUE="2004" >2004
<OPTION VALUE="2005" >2005
<OPTION VALUE="2006" >2006
<OPTION VALUE="2007" >2007
<OPTION VALUE="2008" >2008
<OPTION VALUE="2009" >2009
<OPTION VALUE="2010" >2010
<OPTION VALUE="2011" >2011
<OPTION VALUE="2012" >2012
<OPTION VALUE="2013" >2013
<OPTION VALUE="2014" >2014
<OPTION VALUE="2015" >2015
<OPTION VALUE="2016" >2016
<OPTION VALUE="2017" >2017
<OPTION VALUE="2018" >2018
<OPTION VALUE="2019" >2019
<OPTION VALUE="2020" >2020
<OPTION VALUE="2021" >2021
<OPTION VALUE="2022" >2022
<OPTION VALUE="2023" >2023
<OPTION VALUE="2024" >2024
<OPTION VALUE="2025" >2025
<OPTION VALUE="2026" >2026
<OPTION VALUE="2027" >2027
</SELECT>
<INPUT TYPE="HIDDEN" NAME="_1_1_6_1_hour" VALUE="0">
<INPUT TYPE="HIDDEN" NAME="_1_1_6_1_minute" VALUE="0">
<INPUT TYPE="HIDDEN" NAME="_1_1_6_1_second" VALUE="0">
<INPUT TYPE="HIDDEN" NAME="_1_1_6_1_ampm" VALUE="0">
<SCRIPT LANGUAGE="JavaScript1.2">
function _1_1_6_1_update( changedField, form, newDate )
{
var t;
var fieldType;
var regExp;
if ( null == changedField )
{
t = form;
}
else
{
t = changedField.form;
regExp = /_day$/gi;
if ( regExp.test( changedField.name ) )
{
fieldType = "d";
}
}
if ( ( null != changedField ) && ( changedField.selectedIndex == 0 ) )
{
_1_1_6_1_noSelection( t )
}
else
{
var year;
var theDate = newDate;
if ( null == newDate )
{
theDate = new Date();
}
year = _1_1_6_1_updateYearCentury( t, theDate );
_1_1_6_1_updateDayMonth( t, year, theDate, fieldType );
_1_1_6_1_updateMinuteHour( t, theDate );
_1_1_6_1_constructOScripDate( t );
}
if ( typeof( window.markDirty ) != "undefined" )
{
markDirty();
}
}
function _1_1_6_1_noSelection( form )
{
form._1_1_6_1_month.selectedIndex = 0;
form._1_1_6_1_day.selectedIndex = 0;
form._1_1_6_1_year.selectedIndex = 0;
if ( typeof( form._1_1_6_1_hour ) != "undefined" )
{
form._1_1_6_1_hour.selectedIndex = 0;
}
if ( typeof( form._1_1_6_1_minute ) != "undefined" )
{
form._1_1_6_1_minute.selectedIndex = 0;
}
if ( typeof( form._1_1_6_1_second ) != "undefined" )
{
form._1_1_6_1_second.selectedIndex = 0;
}
if ( typeof( form._1_1_6_1_ampm ) != "undefined" )
{
form._1_1_6_1_ampm.selectedIndex = 0;
}
form._1_1_6_1.value = '?';
}
function _1_1_6_1_updateYearCentury( form, newDate )
{
var year;
var yearIndex = form._1_1_6_1_year.selectedIndex;
var curYear = ( newDate.getFullYear == null ) ? newDate.getYear() : newDate.getFullYear();
if ( form._1_1_6_1_year.selectedIndex == 0 )
{
if ( curYear > 1900 )
{
yearIndex = curYear - 1990 + 1;
}
else
{
yearIndex = 1900 + curYear - 1990 + 1;
}
}
var yearString = form._1_1_6_1_year.options[ yearIndex ].value
year = eval( yearString )
form._1_1_6_1_year.selectedIndex = yearIndex;
return year
}
function _1_1_6_1_updateDayMonth( form, year, newDate, fieldType )
{
var monthIndex = form._1_1_6_1_month.selectedIndex;
var dayIndex = form._1_1_6_1_day.selectedIndex;
var euro = false;
euro = true;
if ( 0 == form._1_1_6_1_month.selectedIndex )
{
monthIndex = newDate.getMonth() + 1;
}
if ( 0 == form._1_1_6_1_day.selectedIndex )
{
dayIndex = newDate.getDate();
}
if ( "2" == form._1_1_6_1_month.options[ monthIndex ].value )
{
form._1_1_6_1_day.options[ 31 ] = null;
form._1_1_6_1_day.options[ 30 ] = null;
if ( ( ( year % 400 ) == 0 ) || ( ( ( year % 100 ) !=0 ) && ( ( year % 4 ) ==0 ) ) )
{
if ( form._1_1_6_1_day.options[ 29 ] == null )
{
form._1_1_6_1_day.options[ 29 ] = new Option( "29" );
form._1_1_6_1_day.options[ 29 ].value = "29";
}
if ( dayIndex > 29 )
{
if ( euro && ( fieldType == 'd' ) )
{
monthIndex = 0;
}
else
{
dayIndex = 29;
}
}
}
else
{
form._1_1_6_1_day.options[ 29 ] = null;
if ( dayIndex > 28 )
{
if ( euro && ( fieldType == 'd' ) )
{
monthIndex = 0;
}
else
{
dayIndex = 28;
}
}
}
}
if ( form._1_1_6_1_month.options[ monthIndex ].value == "1" ||
form._1_1_6_1_month.options[ monthIndex ].value == "3" ||
form._1_1_6_1_month.options[ monthIndex ].value == "5" ||
form._1_1_6_1_month.options[ monthIndex ].value == "7" ||
form._1_1_6_1_month.options[ monthIndex ].value == "8" ||
form._1_1_6_1_month.options[ monthIndex ].value == "10" ||
form._1_1_6_1_month.options[ monthIndex ].value == "12" )
{
if ( form._1_1_6_1_day.options[ 29 ] == null )
{
form._1_1_6_1_day.options[ 29 ] = new Option( "29" );
form._1_1_6_1_day.options[ 29 ].value = "29";
}
if ( form._1_1_6_1_day.options[ 30 ] == null )
{
form._1_1_6_1_day.options[ 30 ] = new Option( "30" );
form._1_1_6_1_day.options[ 30 ].value = "30";
}
if ( form._1_1_6_1_day.options[ 31 ] == null )
{
form._1_1_6_1_day.options[ 31 ] = new Option( "31" );
form._1_1_6_1_day.options[ 31 ].value = "31";
}
}
if ( form._1_1_6_1_month.options[ monthIndex ].value == "4" ||
form._1_1_6_1_month.options[ monthIndex ].value == "6" ||
form._1_1_6_1_month.options[ monthIndex ].value == "9" ||
form._1_1_6_1_month.options[ monthIndex ].value == "11" )
{
if ( form._1_1_6_1_day.options[ 29 ] == null )
{
form._1_1_6_1_day.options[ 29 ] = new Option( "29" );
form._1_1_6_1_day.options[ 29 ].value = "29";
}
if ( form._1_1_6_1_day.options[ 30 ] == null )
{
form._1_1_6_1_day.options[ 30 ] = new Option( "30" );
form._1_1_6_1_day.options[ 30 ].value = "30";
}
form._1_1_6_1_day.options[ 31 ] = null;
if ( dayIndex > 30 )
{
if ( euro && ( fieldType == 'd' ) )
{
monthIndex = 0;
}
else
{
dayIndex = 30;
}
}
}
if ( form._1_1_6_1_day.options[ 29 ] == null )
{
form._1_1_6_1_day.options[ 29 ] = new Option( "29" );
form._1_1_6_1_day.options[ 29 ].value = "29";
}
if ( form._1_1_6_1_day.options[ 30 ] == null )
{
form._1_1_6_1_day.options[ 30 ] = new Option( "30" );
form._1_1_6_1_day.options[ 30 ].value = "30";
}
if ( form._1_1_6_1_day.options[ 31 ] == null )
{
form._1_1_6_1_day.options[ 31 ] = new Option( "31" );
form._1_1_6_1_day.options[ 31 ].value = "31";
}
form._1_1_6_1_month.selectedIndex = monthIndex;
form._1_1_6_1_day.selectedIndex = dayIndex;
}
function _1_1_6_1_updateMinuteHour( form, newDate )
{
form._1_1_6_1_hour.value = newDate.getHours();
form._1_1_6_1_minute.value = newDate.getMinutes();
form._1_1_6_1_second.value = newDate.getSeconds();
}
function _1_1_6_1_constructOScripDate( form )
{
var yearString = form._1_1_6_1_year.options[ form._1_1_6_1_year.selectedIndex ].value;
form._1_1_6_1.value = 'D/' + yearString + '/';
form._1_1_6_1.value = form._1_1_6_1.value + form._1_1_6_1_month.options[ form._1_1_6_1_month.selectedIndex].value + '/';
form._1_1_6_1.value = form._1_1_6_1.value + form._1_1_6_1_day.options[ form._1_1_6_1_day.selectedIndex].value + ':';
form._1_1_6_1.value = form._1_1_6_1.value + '0:0:0';
}
function _1_1_6_1_changeTo( newDate, form )
{
form._1_1_6_1_month.selectedIndex = 0;
form._1_1_6_1_day.selectedIndex = 0;
form._1_1_6_1_year.selectedIndex = 0;
if ( newDate != null )
{
_1_1_6_1_update( null, form, newDate );
}
}
function _1_1_6_1_getDate( form )
{
var retDate = null
var oscriptDateString = form._1_1_6_1.value
if ( oscriptDateString != '?' )
{
var temp = oscriptDateString.split( '/' )
var temp2 = temp[ 3 ].split( ':' )
var yearX = parseInt( temp[ 1 ] )
var monthX = parseInt( temp[ 2 ] ) - 1
var dayX = parseInt( temp2[ 0 ] )
var hourX = parseInt( temp2[ 1 ] )
var minuteX = parseInt( temp2[ 2 ] )
var secondX = parseInt( temp2[ 3 ] )
retDate = new Date( yearX, monthX, dayX, hourX, minuteX, secondX )
}
return retDate
}
</SCRIPT>


</TD>

snoopy0877

09-25-2003, 03:20 AM

type "disabled" properties on the filed you want to display as read only.

<input type=text name=date value='' disabled>

Fang

09-25-2003, 03:23 AM

In function _1_1_6_1_constructOScripDate( form )

you need to add: form._1_1_6_1.value = _1_1_6_1_getDate( form ); as the last line.

Charles

09-25-2003, 05:47 AM

Originally posted by snoopy0877
type "disabled" properties on the filed you want to display as read only.

<input type=text name=date value='' disabled> That is very bad. People who are not using JavaScript will not be able to fill out that field.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>

<form action="" name="myForm">
<div>
<label>Date<input name="date" type="text"></label>
<button type="submit">Submit</button>
</div>
</form>