Set default value for arrows in input[number]

Question

I have an input type="number" for selecting a year that should load empty:

<input type="number" placeholder="Select year" min="1930" max="2015" required
   ng-custom-mask="9999" />

When the user selects the year by arrow keys, it starts in min value: 1930. It'd like something like 1980.

How do I set the custom "start" number to input[number]?

(Any HTML5, JavaScript (even AngularJS) would be nice...)

Answer 1

What about something like:

HTML:

  <input 
     type="number" 
     placeholder="Select year" 
     min="1930" 
     max="2015" 
     required 
     ng-custom-mask="9999"
     ng-model="points" 
     step="{{getStep()}}" />

In your controller:

  $scope.getStep = function() {
    if (!$scope.points) {
      return 50;
    }
    return 1;
  }

Answer 2

You could just add a value attribute

    <input type="number" placeholder="Select year" 
    min="1930" max="2015" required ng-custom-mask="9999" value="1980"/>

Answer 3

I'm a bit late, but this can be 'solved' with a workaround:

1. Set your min and max to the same value, in this case 1980
2. On a change, check if min==max (and min==1980)
3. If yes, set your min and max to the actual values

ie

HMTL:

<input type="number" placeholder="Select year" min="1980" max="1980" required ng-custom-mask="9999" />

JQuery:

$("input[type=number]").on("change", function(){
    if ($(this).attr("min") == $(this).attr("max") && $(this).attr("min") == 1980) {
        $(this).attr("min", 1930);
        $(this).attr("max", 2015);
    }
});