HTML keyin for date

Simple question.
I need to keyin a date as MM/DD/YY.  I would like to show the slashes in the keyin.
breeze351Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
You would have to use javascript to do that.  Whenever I need a specific format like that, I use dropdowns so they can't type something in there that isn't wanted.  'They' will do that whenever 'they' can.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are a bunch of jquery plugins for masking.  A couple are http://digitalbush.com/projects/masked-input-plugin/ and http://robinherbots.github.io/jquery.inputmask/

I have http://digitalbush.com/projects/masked-input-plugin/ in some of my own projects
<input id="date" name="date">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script>
$(function(){
   jQuery(function($){
      $("#date").mask("99/99/99",{placeholder:"mm/dd/yy"});
   });
});

</script>

Open in new window

0
breeze351Author Commented:
Scott:
I've tried to download digitalbush, but Norton won't do it claiming that there is a virus.  It seems simple enough as far as the code is.

David:
Just remember, any time you make something idiot proof, God creates a better idiot!!!!
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Here is the minified version, just copy and paste.  Keep the copyright info in your project.
/*
    jQuery Masked Input Plugin
    Copyright (c) 2007 - 2014 Josh Bush (digitalbush.com)
    Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
    Version: 1.4.0
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a<g.placeholder.length?a:0)}function q(a){for(;++a<n&&!j[a];);return a}function r(a){for(;--a>=0&&!j[a];);return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++)if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++)if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}}function u(){var a=B.val(),b=B.caret();if(a.length<o.length){for(A(!0);b.begin>0&&!j[b.begin-1];)b.begin--;if(0===b.begin)for(;b.begin<l&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}else{for(A(!0);b.begin<n&&!j[b.begin];)b.begin++;B.caret(b.begin,b.begin)}h()}function v(){A(),B.val()!=E&&B.change()}function w(a){if(!B.prop("readonly")){var b,c,e,f=a.which||a.keyCode;o=B.val(),8===f||46===f||d&&127===f?(b=B.caret(),c=b.begin,e=b.end,e-c===0&&(c=46!==f?r(c):e=q(c-1),e=46===f?q(e):e),y(c,e),s(c,e-1),a.preventDefault()):13===f?v.call(this,a):27===f&&(B.val(E),B.caret(0,A()),a.preventDefault())}}function x(b){if(!B.prop("readonly")){var c,d,e,g=b.which||b.keyCode,i=B.caret();if(!(b.ctrlKey||b.altKey||b.metaKey||32>g)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++)j[c]&&(C[c]=p(c))}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++)if(j[b]){for(C[b]=p(b);d++<e.length;)if(c=e.charAt(d-1),j[b].test(c)){C[b]=c,f=b;break}if(d>e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a)},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})});

Open in new window


The drop down is probably going to be the most idiot proof.  It is a good idea to do some error checking on the client side with js, for public facing sites I always do error checking on the server side even if there is error checking on the client side because that is easily circumvented.
0
breeze351Author Commented:
Scott:
I was able to get the code for jquery.maskedinput.js.  I saved it and uploaded it to the website.

I modified the code to read:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script>
$(function(){
   jQuery(function($){
      $("#date").mask("99/99/99",{placeholder:"mm/dd/yy"});
   });
});
</script>
.......
.......
<td width = "8%" align="left" style="padding-left:15px">
                  <div id = "Body_Labels">
                  <p style="margin-bottom: 0px;">From:</p>
                  </div>
            </td>

            <td width = "15%">
                  <div align="left">
            <input name="date" id="date">
                  </div>
            </td>

It still doesn't show the mask.  I can still key anything I want into "date".
What did I screw up?

Glenn
0
Dave BaldwinFixer of ProblemsCommented:
I believe 'date' is a reserved word in javascript.  You should probably use a different identifier, different at least by one letter.
0
breeze351Author Commented:
I changed it 'Listing_From'.  Same results.
0
breeze351Author Commented:
Is there anyone still on this?
0
breeze351Author Commented:
It has been 5 days and I still haven't received a reply from my last post!!!
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Glenn, there could be a number of things wrong.   Please post a link to your test page for us to look at.
0
breeze351Author Commented:
http://mrbreeze.net/index.php
Login:
User: breeze
password: breeze351
Menu: Daily Activity

The problems are with the keyins when you go to "Daily Activity".  You can type anything you want.
0
Dave BaldwinFixer of ProblemsCommented:
Your login doesn't seem to work for me.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I couldn't log in in either.  Can you run the page on your own, view source and copy paste the rendered html to a separate html page. Make sure to strip out anything private.  Then  just post the link to the html page here.
0
breeze351Author Commented:
My bad!  I was fighting today with the NJ DMV and my mind got screwed up.
Password: 351clv
0
breeze351Author Commented:
Is there any one there?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For your test page going forward, it will be a lot easier to get rid of the log in and make a blank page only with the items we need to make this work.

1) You have  the input as type date and it should be type text (or leave type blank)
<input type="date" width="8" name="Listing_From" id="Listing_From" value="04/23/2015">

Open in new window

should be
<input type="text" width="8" name="Listing_From" id="Listing_From" value="04/23/2015">

Open in new window


2) The demo shows,  $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
 and you have$("#Listing_From").mask("99/99/99",{placeholder:"mm/dd/yy"}); so this looks good.

3) The console is showing errors.
Not allowed to load local resource: file:///rollover.js
http://mrbreeze.net/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.maskedinput.js:8 Uncaught ReferenceError: jQuery is not defined
Daily_Activity.php:107 Uncaught ReferenceError: $ is not defined
Daily_Activity.php:156 The specified value '04/23/2015' does not conform to the required format, 'yyyy-MM-dd'.


Make sure jquery and all js is uploaded and the links in your page are correct.  As example, you have
<script type="text/javascript" src="file:rollover.js">

Open in new window

The web can not access "file:somefile.js" and that should be something like below if the js file is in the same level folder.
<script type="text/javascript" src="rollover.js">

Open in new window


If it is in a sub folder than
<script type="text/javascript" src="subfolder/rollover.js">

Open in new window

0
breeze351Author Commented:
I've cleaned up the code but I still have the problem with the keyin.
0
breeze351Author Commented:
Are you guys still on this?  I have 2 open questions and haven't received a response on either one!
0
Dave BaldwinFixer of ProblemsCommented:
I keep checking in... but I would simply never do it your way.  I use dropdowns to force the format to what I needed.  If you are going to keep trying to make this work this way, I think I'll just bow out.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I can't log in.  Please make  sample page that is not behind a log in or use jsbin.com to recreate.
0
breeze351Author Commented:
0
Steve BinkCommented:
Here's a tested solution:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>MaskedInput demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
    <script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <style type='text/css'>
    </style>
    <script type="text/javascript">
      jQuery(function($) {
        $('#Listing_From').mask('99/99/9999',{placeholder:"mm/dd/yyyy"});
      });
    </script>
  </head>
  <body>
    <div id = "content">
      <form action="DisplayDate.php" method="post" name="form1">
        <table id="Table1" border="0" cellspacing="0" cellpadding="2" width="100%" style="height: 100px;">
          <tr>
            <td width = "10%">
              <div id = "Body_Labels" align="right">
                <p style="margin-bottom: 0px;">Listing Date:</p>
              </div>
            </td>
            <td width = "5%" align="right">
              <div id="Body_Labels" align="right" style="padding-left:5px">
                <p style="margin-bottom: 0px;">
                  From:
                </p>
              </div>
            </td>
            <td width = "10%" align="left" style="padding-left:5px">
              <input type = "text" width = "8" name="Listing_From" id="Listing_From" value = "05/18/2015">
            </td>
            <td width = "5%" align="right">
              <div id="Body_Labels" align="right" style="padding-left:5px">
                <p style="margin-bottom: 0px;">
                  To:
                </p>
              </div>
            </td>
            <td width = "10%" align="left" style="padding-left:5px">
              <div align="left">
                <input type = "text" width = "8" name="Listing_To" id="Listing_To" value = "05/19/2015">
              </div>
            </td>
            <td>
            </td>
          </tr>
          <tr>
            <td>
              <div id = "Body_Labels" align="right">
                <p style="margin-bottom: 0px;">Update Date:</p>
              </div>
            </td>
            <td width = "5%" align="right">
              <div id="Body_Labels" align="right" style="padding-left:5px">
                <p style="margin-bottom: 0px;">
                  From:
                </p>
              </div>
            </td>
            <td width = "10%" align="left" style="padding-left:5px">
              <input type = "text" width = "8" name="Update_From" id="Update_From" value = "05/18/2015">
            </td>
            <td width = "5%" align="right">
              <div id="Body_Labels" align="right" style="padding-left:5px">
                <p style="margin-bottom: 0px;">
                  To:
                </p>
              </div>
            </td>
            <td width = "10%" align="left" style="padding-left:5px">
              <div align="left">
                <input type = "text" width = "8" name="Update_To" id="Update_To" value = "05/19/2015">
              </div>
            </td>
            <td>
            </td>
          </tr>
        </table>
        <table id="Table3" border="0" cellspacing="0" cellpadding="2" width="100%" style="height: 25px;">
          <tr>
            <!-- Reset Button -->
            <td align = "center">
              <input type="reset" name="Reset" id="Reset" value="Reset" />
            </td>
            <!-- End Reset Button -->
            <!-- Display Button -->
            <td align = "center">
              <input type="submit" name="Display" id="Display" value="Display" />
            </td>
            <!-- End Display Button -->
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
breeze351Author Commented:
Steve:
Thanks.  Sorry that I didn't respond earlier.  I'm just getting back to work.  I just moved last Friday.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.