Solved

simple jquery date with time mask

Posted on 2014-01-29
11
2,749 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

861 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

26 Experts available now in Live!

Get 1:1 Help Now