允許以mm/dd/yyyy格式顯示月份，開始時使用javascript

Question

我有一個文本框和小鍵盤設計，用於生成用戶出生日期。

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？

注：我有我的網頁設計，上面是像下圖：

用戶不應在文本框中直接鍵入。文本框應該有我設計的鍵盤輸入。因此，沒有在文本框如type="date"上使用日期功能或使用datepicker或任何插件作爲用戶的使用不直接使用文本框。

Answer 1

你已經很接近了，但是肯定有更好的方法來做到這一點，正如評論（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)。

最後，在Clear,Current = "0";-與以前相同。 Current = "";。

你對JS有什麼不好的第一次嘗試，所以不斷練習。一些提示：

• 丟失標題案例var/function名稱。
• 使用var每當定義變量（除非使用ES6 - 然後使用let/const）
• 不要重建輪 - 利用圖書館已經存在。
• 使用正確的HTML屬性 - onClick超過OnClick。

 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>