Solved

simple jquery date with time mask

Posted on 2014-01-29
11
2,708 Views
Last Modified: 2014-02-24
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.
0
Comment
Question by:hougie40
  • 6
  • 4
11 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39820526
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39820532
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
 

Author Comment

by:hougie40
ID: 39820797
To both comments above.  I do not believe the placeholder property exists for asp.net textbox controls.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39820807
It is not an ASP thing, it is an HTML5 thing. So Chrome, FX, Safari and IE10 supports it
0
 

Author Comment

by:hougie40
ID: 39820875
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39820984
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
 

Author Comment

by:hougie40
ID: 39821175
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39821743
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
 

Author Comment

by:hougie40
ID: 39822003
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
 

Author Comment

by:hougie40
ID: 39822404
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
 

Author Closing Comment

by:hougie40
ID: 39883931
Thanks
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now