anonymous anonymous - 1 month ago 5
HTML Question

allow 0 in mm/dd/yyyy format for month at start using javascript

I have one textbox and keypad design to take date of birth by user.

HTML code



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.
};


if (Current.length > 0) {
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;">
<!-- Screen and clear key -->
<div class="keys">
<!-- operators and other keys -->
<span OnClick="AddDigit('1')">1</span>
<span OnClick="AddDigit('2')">2</span>
<span OnClick="AddDigit('3')">3</span>

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

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

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





I am taking date in MM/DD/YYYY format. Above code is working fine. It takes digits by automatically adding
/
in between digits. But when user wants to enter date like 05/11/2016, for month it does not allowing to take 0 at start. when user clicks 0 from keypad and then 5 for example, it coverts 0 to 5. It does not take 0 at the beginning. And it adds next clicked digit to month. e.g. 51/11/2016 like this.

How should I allow 0 at the beginning for month?

NOTE: I have my web page design for above is like below image:
enter image description here

User should not type directly in textbox. Textbox should have inputs from the keypad that I have design. So no use of applying date functionality on textbox like
type="date"
or using datepicker or any plugins as user is not directly using textbox.

Answer

You're quite close, but there are definitely better ways of doing this, as suggested in the comments (DatePicker, moment.js(), etc.).

However, looking at your code, you have a few problems.

Current = "0"; - why are we setting the default value to '0'? It should be Current = "";.

if(eval(Current) == 0) - I have no idea what this is doing. However, if the first digit is '0', then you're doing if(eval(0) == 0). i.e. if(false == false). i.e. if(true).

eval is evil, but if you insist on doing it that way, then you can switch that line to if(eval(Current) === undefined).

Lastly, in Clear, Current = "0"; - same as before. Current = "";.

What you have isn't a bad first attempt at JS, so keep practicing. Some tips:

  • Lose the Title Case var/function names.
  • Use var whenever defining variables (unless using ES6 - then use let/const)
  • Don't recreate the wheel - use libraries that already exist.
  • Use correct HTML attributes - onClick over 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.
        };
     	
    	
     if (Current.length > 0) {
    	 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;">
    	<!-- Screen and clear key -->
    	    <div class="keys">
    		  <!-- operators and other keys -->
    		  <span OnClick="AddDigit('1')">1</span>
    		  <span OnClick="AddDigit('2')">2</span>
    		  <span OnClick="AddDigit('3')">3</span>

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

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

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