2016-10-28 3 views
1

ユーザーが生年月日を取るためのテキストボックスとキーパッドのデザインが1つあります。javascriptを使用して開始時に月にmm/dd/yyyy形式で0を入力できます

HTMLコード

 Memory = "0";  // initialise memory variable 
 
     Current = "0";  // and value of Display ("current" value) 
 
     Operation = 0;  // Records code for eg */etc. 
 
     MAXLENGTH = 8;  // maximum number of digits before decimal! 
 
    
 
    function format(input, format, sep) { 
 
     var output = ""; 
 
     var idx = 0; 
 
     for (var i = 0; i < format.length && idx < input.length; i++) { 
 
      output += input.substr(idx, format[i]); 
 
      if (idx + format[i] < input.length) output += sep; 
 
      idx += format[i]; 
 
     } 
 

 
     output += input.substr(idx); 
 

 
     return output; 
 
    } 
 
    
 
    function AddDigit(dig)   //ADD A DIGIT TO DISPLAY (keep as 'Current') 
 
    { if (Current.indexOf("!") == -1) //if not already an error 
 
     { if ( (eval(Current) == 0) 
 
        && (Current.indexOf(".") == -1) 
 
      ) { Current = dig; 
 
       } else 
 
       { Current = Current + dig; 
 
       }; 
 
      Current = Current.toLowerCase(); //FORCE LOWER CASE 
 
     } else 
 
     { Current = "Hint! Press 'Clear'"; //Help out, if error present. 
 
     }; 
 
     \t 
 
    \t 
 
    if (Current.length > 0) { 
 
    \t Current = Current.replace(/\D/g, ""); 
 
      Current = format(Current, [2, 2, 4], "/"); 
 
     } 
 
     
 
    
 
     document.calc.display.value = Current.substring(0, 10); 
 
    } 
 
    
 
    
 
    function Clear()    //CLEAR ENTRY 
 
    { Current = "0"; 
 
     document.calc.display.value = Current; 
 
    }
<form Name="calc" method="post"> 
 
      <input class="intxt1" autocomplete="off" id="ptdob" maxlength="6" name="display" type="tel" value="" placeholder="MM/DD/YYYY"><button class="cancel-icon" type="reset" OnClick="Clear()"></button>  
 
      <div class="calculator" style="margin: 30px auto;"> 
 
    \t <!-- Screen and clear key --> 
 
    \t  <div class="keys"> 
 
    \t \t <!-- operators and other keys --> 
 
    \t \t <span OnClick="AddDigit('1')">1</span> 
 
    \t \t <span OnClick="AddDigit('2')">2</span> 
 
    \t \t <span OnClick="AddDigit('3')">3</span> 
 

 
    \t \t <span OnClick="AddDigit('4')">4</span> 
 
    \t \t <span OnClick="AddDigit('5')">5</span> 
 
    \t \t <span OnClick="AddDigit('6')">6</span> 
 

 
    \t \t <span OnClick="AddDigit('7')">7</span> 
 
    \t \t <span OnClick="AddDigit('8')">8</span> 
 
    \t \t <span OnClick="AddDigit('9')">9</span> 
 

 
    \t \t <span OnClick="AddDigit('0')" style="width: 166px;">0</span> 
 
    \t \t <span class="clear" OnClick="Clear()"> 
 
       <div class="xBox">X</div> 
 
       </span> 
 
    \t </div> 
 
     </div> 
 
    </form>

私はMM/DD/YYYY形式で日付を取っています。上記のコードは正常に動作しています。自動的に数字の間に/を追加することによって数字を取ります。しかし、ユーザーが05/11/2016のような日付を入力したい場合、最初は0を取ることができません。ユーザーがキーパッドから0をクリックした後、たとえば5をクリックすると、0〜5が覆い隠されます。最初は0になりません。そして、次のクリックされた数字を月に追加します。例えばこのような51/11/2016。

月の初めに0をどうすればよいですか?

注:私は上記のための私のウェブページのデザインを持っている画像の下のようなものです:

enter image description here

ユーザーがテキストボックスに直接入力するべきではありません。テキストボックスには、私が設計したキーパッドからの入力が必要です。だから、type="date"のようなテキストボックスに日付機能を適用したり、ユーザーとしてdatepickerやプラグインを使用したりするのはテキストボックスを直接使用していません。

+1

あなたは、なぜあなたは 'タイプが= "TEL"'、これを追加しましたhttp://momentjs.com/ –

+1

を使って自分で頭痛やテストを大幅に節約したいです、 try 'type =" date "' –

+0

なぜeval()を使用していますか? –

答えて

0

あなたは非常に近いですが、コメント(DatePicker、moment.js()などで提案されているように、これを行う方法は間違いありません。

しかし、あなたのコードを見ると、いくつか問題があります。

Current = "0"; - 私たちはなぜデフォルト値を '0'に設定していますか? Current = "";である必要があります。

if(eval(Current) == 0) - これが何をしているのかわかりません。ただし、最初の数字が '0'の場合は、if(eval(0) == 0)を実行しています。すなわちif(false == false)。すなわちif(true)

evalは悪ですが、そのようにしたい場合は、その行をif(eval(Current) === undefined)に切り替えることができます。

最後に、ClearCurrent = "0";-以前と同じです。 Current = "";

あなたが持っているものは、JSでの最初の悪い試みではないので、練習を続けてください。いくつかのヒント:

  • タイトルケースの変数/関数名が失われます。
  • 使用var変数を定義するたびに、すでに存在して使用ライブラリ - -
  • は、車輪を再作成しないでください(ES6を使用していない限り、その後let/const使用します)。
  • 正しいHTML属性 - onClickOnClick以上に使用してください。

 Memory = "0";  // initialise memory variable 
 
     Current = "";  // and value of Display ("current" value) 
 
     Operation = 0;  // Records code for eg */etc. 
 
     MAXLENGTH = 8;  // maximum number of digits before decimal! 
 
    
 
    function format(input, format, sep) { 
 
     var output = ""; 
 
     var idx = 0; 
 
     for (var i = 0; i < format.length && idx < input.length; i++) { 
 
      output += input.substr(idx, format[i]); 
 
      if (idx + format[i] < input.length) output += sep; 
 
      idx += format[i]; 
 
     } 
 

 
     output += input.substr(idx); 
 

 
     return output; 
 
    } 
 
    
 
    function AddDigit(dig)   //ADD A DIGIT TO DISPLAY (keep as 'Current') 
 
    { if (Current.indexOf("!") == -1) //if not already an error 
 
     { if ( (eval(Current) === undefined) 
 
        && (Current.indexOf(".") == -1) 
 
      ) { Current = dig; 
 
       } else 
 
       { Current = Current + dig; 
 
       }; 
 
      Current = Current.toLowerCase(); //FORCE LOWER CASE 
 
     } else 
 
     { Current = "Hint! Press 'Clear'"; //Help out, if error present. 
 
     }; 
 
     \t 
 
    \t 
 
    if (Current.length > 0) { 
 
    \t Current = Current.replace(/\D/g, ""); 
 
      Current = format(Current, [2, 2, 4], "/"); 
 
     } 
 
     
 
    
 
     document.calc.display.value = Current.substring(0, 10); 
 
    } 
 
    
 
    
 
    function Clear()    //CLEAR ENTRY 
 
    { Current = ""; 
 
     document.calc.display.value = Current; 
 
    }
<form Name="calc" method="post"> 
 
      <input class="intxt1" autocomplete="off" id="ptdob" maxlength="6" name="display" type="tel" value="" placeholder="MM/DD/YYYY"><button class="cancel-icon" type="reset" OnClick="Clear()"></button>  
 
      <div class="calculator" style="margin: 30px auto;"> 
 
    \t <!-- Screen and clear key --> 
 
    \t  <div class="keys"> 
 
    \t \t <!-- operators and other keys --> 
 
    \t \t <span OnClick="AddDigit('1')">1</span> 
 
    \t \t <span OnClick="AddDigit('2')">2</span> 
 
    \t \t <span OnClick="AddDigit('3')">3</span> 
 

 
    \t \t <span OnClick="AddDigit('4')">4</span> 
 
    \t \t <span OnClick="AddDigit('5')">5</span> 
 
    \t \t <span OnClick="AddDigit('6')">6</span> 
 

 
    \t \t <span OnClick="AddDigit('7')">7</span> 
 
    \t \t <span OnClick="AddDigit('8')">8</span> 
 
    \t \t <span OnClick="AddDigit('9')">9</span> 
 

 
    \t \t <span OnClick="AddDigit('0')" style="width: 166px;">0</span> 
 
    \t \t <span class="clear" OnClick="Clear()"> 
 
       <div class="xBox">X</div> 
 
       </span> 
 
    \t </div> 
 
     </div> 
 
    </form>

+1

お返事ありがとうございました。本当にこれは私がJSで進歩するのを助けるでしょう。私はいくつかのプラグインとテキストボックスの機能も認識していましたが、要件が異なるので、この場合は使用できませんでした。 – anonymous

関連する問題