[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

simple jquery date with time mask

Posted on 2014-01-29
11
Medium Priority
?
2,996 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

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.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses
Course of the Month18 days, 13 hours left to enroll

834 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