simple jquery date with time mask

Im in need of a simple date + time mask for an asp.net textbox.

It should behave the following way.

When the textbox is empty and when a user clicks in the box they should
get a format of m/dd/yyyy 0:00:00 PM.

Then the user should be able to insert the chars over the mask like when the insert is pressed on the keyboard.

Im willing to forgo the validation of correct month, day, year and time inputs.  Just the mask should suffice.  Javascript is ok also.
Steve HougomDeveloper IIAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
If you can use jquery there are some plug ins that make this easy.  

http://igorescobar.github.io/jQuery-Mask-Plugin/
http://digitalbush.com/projects/masked-input-plugin/

When the field is empty you can use the place holder tag.  <input name="date" placeholder ="m/dd/yyyy 0:00:00 PM">
0
 
Michel PlungjanIT ExpertCommented:
Without any masking try

<input id="date" placeholder="mm/dd/yyyy 0:00:00 AM/PM." />
<script>
var field2focus,isDate = /^(0[1-9]|1[012])[/](0[1-9]|[12][0-9]|3[01])[/][0-9]{4}(\s((0[1-9]|1[012])\:([0-5][0-9])((\s)|(\:([0-5][0-9])\s))([AM|PM|]{2,2})))?$/

function testDate() {
  if (isDate.test(this.value)) return true;
  alert("Please enter a valid date");
  field2focus = this;
  setTimeout(function() { field2focus.focus()},50);
}
var test = document.createElement('input'),
phSupported = 'placeholder' in test;

window.onload=function() {
  var dateField = document.getElementById("date");
  if (!phSupported) { // IE<10 for example
    if (dateField.value==dateField.defaultValue) dateField.value=dateField.getAttribute("placeholder");
    dateField.onfocus=function() {if (this.value==this.defaultValue) this.value=''" }
    dateField.onblur=function() {if (this.value=="") this.value=this.defaultValue; testDate(this)}
  }
  else dateField.onblur=testDate;
}

Open in new window

0
 
Steve HougomDeveloper IIAuthor Commented:
To both comments above.  I do not believe the placeholder property exists for asp.net textbox controls.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
Michel PlungjanIT ExpertCommented:
It is not an ASP thing, it is an HTML5 thing. So Chrome, FX, Safari and IE10 supports it
0
 
Steve HougomDeveloper IIAuthor Commented:
But correct me if Im wrong i would need to replace my server control which has existed long before this requirement to add a mask to it and stores data in sql server via asp.net with an html5 input control?  That would pose other issues.  Like re-creating my insert logic to my datalayer class for the new input control.

<asp:TextBox runat="server" ID="txtTime"></asp:TextBox>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Just replace my previous window.onload with the following (keeping the other functions there)

window.onload=function() {
  var dateField = document.getElementById("txtTime");
  dateField.setAttribute("placeholder","mm/dd/yyyy 0:00:00 AM/PM.");
  if (!phSupported) { // IE<10 for example
    if (dateField.value==dateField.defaultValue) dateField.value=dateField.getAttribute("placeholder");
    dateField.onfocus=function() {if (this.value==this.defaultValue) this.value=''" }
    dateField.onblur=function() {if (this.value=="") this.value=this.defaultValue; testDate(this)}
  }
  else dateField.onblur=testDate;
}

Open in new window

0
 
Steve HougomDeveloper IIAuthor Commented:
Currently I have 3 errors in the script.  

1st one is "unterminated string constant"
1st err
2nd one is "syntax error"
err 2
3rd one is "expected }"
3rd err
errors
0
 
Michel PlungjanIT ExpertCommented:
Ok I try again

Leftover quote here

this.value=''" <<<


var field2focus,isDate = /^(0[1-9]|1[012])[/](0[1-9]|[12][0-9]|3[01])[/][0-9]{4}(\s((0[1-9]|1[012])\:([0-5][0-9])((\s)|(\:([0-5][0-9])\s))([AM|PM|]{2,2})))?$/

function testDate() {
  if (isDate.test(this.value)) return true;
  alert("Please enter a valid date");
  field2focus = this;
  setTimeout(function() { field2focus.focus()},50);
}
var test = document.createElement('input'),
phSupported = 'placeholder' in test;


window.onload=function() {
  var dateField = document.getElementById("txtTime");
  dateField.setAttribute("placeholder","mm/dd/yyyy 0:00:00 AM/PM.");
  if (!phSupported) { // IE<10 for example
    if (dateField.value==dateField.defaultValue) {
      dateField.value=dateField.getAttribute("placeholder");
     }
    dateField.onfocus=function() {if (this.value==this.defaultValue) this.value="" }
    dateField.onblur=function() {if (this.value=="") this.value=this.defaultValue; testDate(this)}
  }
  else dateField.onblur=testDate;
}

Open in new window

0
 
Steve HougomDeveloper IIAuthor Commented:
As I stated earlier the validation is not the important part.  The users I have are pretty responsible.  Its the MASK I really need.  But this code did not create a placeholder mask.

__/__/_____ 0:00:00 PM
0
 
Steve HougomDeveloper IIAuthor Commented:
One of the issues I have is that this is an ascx user control and the only way ive been able to get jquery to behave at all is if I stick it at the bottom of the page and put it inside of a <div runat = server>

So it makes referencing controls more difficult.  I have not been able to get this to work.  The mask doesnt work on the page at all even just using the date.

code
0
 
Steve HougomDeveloper IIAuthor Commented:
Thanks
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.

All Courses

From novice to tech pro — start learning today.