• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 27051
  • Last Modified:

Jscript date-time input mask validation

Hi X-perts,

I need a simple script to validate user's unput of date & time with some mask. It should check input of nymbers only and give a slash prompt, when input is correct.  have found a lot of scripts, but not exactly what I need. This script below check only date but not time:

<script>
function validDate(obj){
 date=obj.value
if (/[^\d/]|(\/\/)/g.test(date))  {obj.value=obj.value.replace(/[^\d/]/g,'');obj.value=obj.value.replace(/\/{2}/g,'/'); return }
if (/^\d{2}$/.test(date)){obj.value=obj.value+'/'; return }
if (/^\d{2}\/\d{2}$/.test(date)){obj.value=obj.value+'/'; return }
if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(date)) return

 test1=(/^\d{1,2}\/?\d{1,2}\/\d{4}$/.test(date))
 date=date.split('/')
 d=new Date(date[2],date[1]-1,date[0])
 test2=(1*date[0]==d.getDate() && 1*date[1]==(d.getMonth()+1) && 1*date[2]==d.getFullYear())
 if (test1 && test2) return true
 alert("Invalid date")
 obj.select();
 obj.focus()
 return false
}
</script>
<body>
<p>Date1: <input type="text" name="startDate" size="9" maxLength="10"
onkeyup="validDate(this)"  onblur="validDate(this)"> </p>
</body>
</html>

What should be fixed to add time input to the same field in the form HH:MM (24h format)? Maybe someone has a better solution...

Thanks

Andy
0
andy7789
Asked:
andy7789
  • 5
  • 4
2 Solutions
 
Michel PlungjanIT ExpertCommented:
How about not allowing them to enter an illegal date in the first place?

<html>
<head>
     <title>Untitled</title>
<script>
/* Set days in month script
   Copyright (c) 2003-2006 Michel Plungjan "javascripts (a) planet.nl" */
// Change the values below if needed:
adjustYears=true; // fix the year drop down to be around now.
yearAdjustment=-2; // how many years prior to this year
numberOfYears = 5; // how many years in the dropdown

function setDate(theForm) {
  var year = theForm.year.options[theForm.year.selectedIndex].value
  if (!year) return
  var month = theForm.month.options[theForm.month.selectedIndex].value
  if (!month) return
  var d = new Date(year,month,0); // last day in the previous month because months start on 0
  var daysInMonth = d.getDate();
  theForm.day.options.length=29;// save the minimum days
  if (daysInMonth>28) for (i=29;i<=daysInMonth;i++) {
    theForm.day.options.length++
    theForm.day.options[theForm.day.options.length-1] = new Option(i,i)
  }
}
function setNow() {
  var now = new Date()
  var ySel = document.forms[0].year;
  var mSel = document.forms[0].month;
  var dSel = document.forms[0].day;
  var hSel = document.forms[0].hour;
  var minSel = document.forms[0].min;

  var year = now.getFullYear();

  if (adjustYears) {
    var firstYear = year + yearAdjustment;
    ySel.options.length=1; // remove all but 1st option
    for (var i=firstYear, n=firstYear+numberOfYears;i<n;i++) {
      ySel.options.length++
      ySel.options[ySel.options.length-1] = new Option(i,i)
    }
  }
  var minYear = parseInt(ySel.options[1].value);
  var diff = year-minYear+1;
  ySel.selectedIndex=((diff)>0)?diff:0;

  mSel.selectedIndex = now.getMonth()+1;
  dSel.selectedIndex = now.getDate(); // NB: Not 0 based

  hSel.selectedIndex=now.getHours()+1;
  minSel.selectedIndex= now.getMinutes()+1;
}
</script>
</head>

<body onLoad="setNow()">
<form>
<select name="year" onChange="setDate(this.form)">
<option value="">Year
<option value="2003">2003
<option value="2004">2004
<option value="2005">2005
<option value="2006">2006
<option value="2007">2007
</select>
<select name="month" onChange="setDate(this.form)">
<option value="">Month
<option value="1">Jan
<option value="2">Feb
<option value="3">Mar
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">Aug
<option value="9">Sep
<option value="10">Oct
<option value="11">Nov
<option value="12">Dec
</select>
<select name="day"><!-- Use all days to help NS4 -->
<option value="">Day
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<select name="hour">
<option value="">Hour
<option value="0">00
<option value="1">01
<option value="2">02
<option value="3">03
<option value="4">04
<option value="5">05
<option value="6">06
<option value="7">07
<option value="8">08
<option value="9">09
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
</select>:
<select name="min">
<option value="">min
<option value="0">00
<option value="1">01
<option value="2">02
<option value="3">03
<option value="4">04
<option value="5">05
<option value="6">06
<option value="7">07
<option value="8">08
<option value="9">09
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<option value="32">32
<option value="33">33
<option value="34">34
<option value="35">35
<option value="36">36
<option value="37">37
<option value="38">38
<option value="39">39
<option value="40">40
<option value="41">41
<option value="42">42
<option value="43">43
<option value="44">44
<option value="45">45
<option value="46">46
<option value="47">47
<option value="48">48
<option value="49">49
<option value="50">50
<option value="51">51
<option value="52">52
<option value="53">53
<option value="54">54
<option value="55">55
<option value="56">56
<option value="57">57
<option value="58">58
<option value="59">59

</select>
</form>


</body>
</html>
0
 
andy7789Author Commented:
Thanks mplungjan

It is not exactly what I am thinking of. It has to be just a single typing field, but not a few dropdown menus. Obviously, it is a good idea to validate date and month upon input. The 1st script validates the whole string, not the date-month.

Andy
0
 
Michel PlungjanIT ExpertCommented:
How does a valid date look like for you?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
andy7789Author Commented:
If we forget about leap years we should have at least

1. date  - 30 or 31 days depending on a given month and 28 days for Feb
2. 1<= month<=12
3. year>=2006  
0
 
Michel PlungjanIT ExpertCommented:
I mean, how does the string look like that the user MUST enter
0
 
Pravin AsarPrincipal Systems EngineerCommented:

function isDate(fld) {
   var value = fld.value;
   var datePat = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
   var matchArray = value.match(datePat); // is the format ok?
   if (matchArray == null) {
             alert("Please enter date as either mm/dd/yyyy or mm-dd-yyyy.");
             return false;
   }
   return true;
}

<!-- Accept the Date in mm/dd/yyyy or mm-dd-yyyy format -->
<p>Date1: <input type="text" name="startDate" size="9" maxLength="10"
onkeyup="validDate(this)"  onblur="isDate(this)"> </p>

<!--- Refer to my posts for usage examples -->

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21860586.html

Following  has a formatTime functions

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21851048.html
0
 
andy7789Author Commented:
mplungjan,

Sorry, it seems that my reply to your post is missing;) The input string should look like:

dd/mm/yyyy hh:mm or
dd-mm-yyyy hh:mm

After date or month input there should be an automatic slash prompt (like the mask in the 1st code). The script what I am looking for should not only validate the input, but act as a mask

Best,

Andy
0
 
Michel PlungjanIT ExpertCommented:
What is "an automatic slash prompt"

0
 
Michel PlungjanIT ExpertCommented:
Too bad this does not work 100% (due to annoying americanism)

<form>
<input type="text" size="50" onKeyUp="this.form.showDate.value=new Date(this.value)">
<br>
<input type="text" size="50" name="showDate">
</form>
0
 
andy7789Author Commented:
Thanks everybody for nice contributions. Finally, I had to rewrite my script based mostly on pravinasar solutions.
All the best
Andy
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now