Veela Veela - 1 year ago 173
AngularJS Question

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="" 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?

Answer Source

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.


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


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");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download