Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12487 > unrolled thread

Fancy Date Entry

Back to article view | Back to comp.lang.javascript

Contents

  Fancy Date Entry Gene Wirchenko <genew@ocis.net> - 2012-03-07 19:02 -0800
    Re: Fancy Date Entry "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-08 23:23 +0000
      Re: Fancy Date Entry Gene Wirchenko <genew@ocis.net> - 2012-03-08 19:32 -0800
        Re: Fancy Date Entry "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-09 08:09 +0000
    Re: Fancy Date Entry Dr J R Stockton <reply1210@merlyn.demon.co.uk> - 2012-03-09 21:18 +0000

#12487 — Fancy Date Entry

Dear JavaScripters:

     The following is getting way past what I know how to do.  I
suppose that I might be able to work something out, but pointers on
what I need to know first would help.  I have found it hard to find
detailed information on event handling, and I will be needing that
here.

     The app that I will eventually be writing non-framework code for
will use dates quite a bit.  I want to make it easy to enter dates.
The standard we use is YYYYMMDD format.

     In the example below "[" and "]" are the field delimiters and "^"
is the cursor.  What I would like to be able to do is:

Initialise field:
     [20120307^]
Enter "1":
     [20120301^]
Enter "0":
     [20120310^]
Enter "2":
     [20120102^]
Enter "5":
     [20121025^]
Enter <tab>:
     Entered date is 2012-10-25.

     Note that only the part of the date that needs to be entered was
entered.  Most transactions in this system are in the same month.  If
I can have it so that only the day of the month needs to be entered
while allowing a full date to be entered, should that be needed, I
will be happy.

     While I am at it, I might as well have the dates with the
hyphens:
     [2012-03-07^]
etc., but I think that that would be trivial once I know how to get
the first bit done.

     So...

     What pointers are there for the events that I need to be able to
handle in order to do this?

     Has anyone done anything like this?

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#12511

Gene Wirchenko wrote on 08 mrt 2012 in comp.lang.javascript:

>     In the example below "[" and "]" are the field delimiters and "^"
> is the cursor.  What I would like to be able to do is:
> 
> Initialise field:
>      [20120307^]
> Enter "1":
>      [20120301^]
> Enter "0":
>      [20120310^]
> Enter "2":
>      [20120102^]
> Enter "5":
>      [20121025^]
> Enter <tab>:
>      Entered date is 2012-10-25.
> 

I think it is a silly way to enter a date,
but the programming is simple for someone
with an extensive experience in c++, etc.

A minimalistic example, 
without your tab function,
automatic focus is here the body,
[chrome and ie tested]:

==========================
<body onkeyup='getKey(event)'>

[<span id=a>20120307</span><span 
id=b style='color:red;'></span>]
<br><br>re-initialize by pressing 'i'.

<script type='text/javascript'>
var s = '';
function getKey(e) {
  var charCode = (e.which) ? e.which : e.keyCode
  if (charCode==73) s = '';
  if (charCode>47 && charCode<58) s += charCode-48;
  if (charCode>95 && charCode<106) s += charCode-96;
  if (s.length<9) {
    document.getElementById('a').innerHTML = 
       '20120307'.substr(0,8-s.length);
    document.getElementById('b').innerHTML = s;
  };
};
</script>
==========================

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#12519

On 08 Mar 2012 23:23:29 GMT, "Evertjan."
<exjxw.hannivoort@interxnl.net> wrote:

[snip]

>I think it is a silly way to enter a date,
>but the programming is simple for someone
>with an extensive experience in c++, etc.

    Well, my boss likes head-down data entry.  The programming is
fairly simple once you figure out the bits and pieces.  The bits and
pieces are what have been giving me trouble.

>A minimalistic example, 
>without your tab function,
>automatic focus is here the body,
>[chrome and ie tested]:
>
>==========================
><body onkeyup='getKey(event)'>
>
>[<span id=a>20120307</span><span 
>id=b style='color:red;'></span>]
><br><br>re-initialize by pressing 'i'.
>
><script type='text/javascript'>
>var s = '';
>function getKey(e) {
>  var charCode = (e.which) ? e.which : e.keyCode
>  if (charCode==73) s = '';
>  if (charCode>47 && charCode<58) s += charCode-48;
>  if (charCode>95 && charCode<106) s += charCode-96;
>  if (s.length<9) {
>    document.getElementById('a').innerHTML = 
>       '20120307'.substr(0,8-s.length);
>    document.getElementById('b').innerHTML = s;
>  };
>};
></script>
>==========================

     I must have gotten a bit scared after the earlier difficulty I
had with keyboard events.  I had visions of code rather longer.  I
would prefer to use an input control for consistency with the rest of
my form, but your code looks quite adaptable.  Thank you.

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12522

Gene Wirchenko wrote on 09 mrt 2012 in comp.lang.javascript:

>      I must have gotten a bit scared after the earlier difficulty I
> had with keyboard events.  I had visions of code rather longer.  I
> would prefer to use an input control for consistency with the rest of
> my form, but your code looks quite adaptable.  Thank you.

You can easily fake an <input> with css borders on a div, span or td. 
Use a hidden input for form-submit output.

An alternative with a size-one inputfield 
to collect the last keystroke on focus is interesting,
as focus can easily be applied to more than one field:

====================================
<body onload='document.getElementById("i").focus()'>

[<span id=a>20120307</span><span 
id=b style='color:red;'></span>]
<input onkeyup='getKey(this)' size=1
style='width:10px;font-size:7pt;' id=i>
<br><br>
re-initialize by pressing 'i'.
<br>
show result with 'r'

<script type='text/javascript'>
var s = '';
function getKey(t) {
  var char = t.value;
  t.value='';
  if (char=='i') s = '';
  if (char=='r') return show();
  if (char>=0 && char<=9) s += char;
  if (s.length<9) {
    document.getElementById('a').innerHTML = 
       '20120307'.substr(0,8-s.length);
    document.getElementById('b').innerHTML = s;
  };
};

function show() {
  alert(document.getElementById('a').innerHTML +
  document.getElementById('b').innerHTML);
};
</script>
====================================

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#12556

In comp.lang.javascript message <2n7gl7pfgu7mni1bj6cvluit67cnve4ge8@4ax.
com>, Wed, 7 Mar 2012 19:02:44, Gene Wirchenko <genew@ocis.net> posted:

>
>     Note that only the part of the date that needs to be entered was
>entered.  Most transactions in this system are in the same month.  If
>I can have it so that only the day of the month needs to be entered
>while allowing a full date to be entered, should that be needed, I
>will be happy.

Typing into a field which does not accrue characters in the usual manner
seems likely to lead to confusion.  You probably need to prevent, or
consider, mouse actions in the field.

Instead, why not type into an initially empty field, which accepts what
is typed in the usual fashion, and have above it a readonly field which
displays the date currently indicated.  At each keystroke, and perhaps
at each mouse action - or alternatively every 25 milliseconds - read the
input string, apply it by your algorithm to the default date, and show
that in the readonly field, which is what will be used when submitted.

It would be possible, and might be useful, to change the colour of the
readonly field when, as is, it represents an invalid date - either
because it is non-Gregorian or because it is outside the range that the
application should accept.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web