Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

simple jquery date with time mask

Posted on 2014-01-29
11
2,773 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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
 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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…

839 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