CODEWITHSUNDEEP
angularjsdatepickerangular-material
Veela
Veela

Reputation: 280

Numeric keyboard in md-datepicker

How to call the numeric keyboard in md-datepicker?

<md-datepicker id="xs-datepicker" name="date" ng-model="vm.entryDate" md-max-date="vm.now" required flex=50></md-datepicker>

The alpha numeric keypad appears by default when editing the md-datepicker on mobile phones. How can I call the numeric keypad instead of the alpha numeric keypad?

Upvotes: 1

Views: 985

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Tweaking a question I answered yesterday to access the input of the date picker one can set its type to be number so when one views this CodePen on a mobile phone, tapping the input brings up the numeric keypad. Is that what you mean? Tapping the calendar icon does not bring up a keyboard on my phone.

Markup

<div ng-controller="AppCtrl" style="padding: 40px;" ng-cloak="" ng-app="MyApp">
  <md-content>
    <md-datepicker id="myDatePicker" ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function($scope, $element) {
    $scope.myDate = new Date();
    var myDatePicker = angular.element($element[0].querySelector('#myDatePicker'));
    var myDatePickerInputContainer = angular.element(myDatePicker[0].children[1]);
    var myDatePickerInput = angular.element(myDatePickerInputContainer[0].children[0]);
    myDatePickerInput.attr("type", "number");
});

Upvotes: 1

Related Questions