• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 26849
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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