md-datepicker - Input field should be readonly - No manual date entry allowed

Question

What I want to achieve here is I would like to mark input field (child node of md-datepicker) should be marked readonly so that user can't enter date value manually (typing) and forced to select date from md-datepicker.

I tried implementing this by decorating md-datepicker directive, but no luck.

is there any other easy and correct way to mark input field as readonly and force user to select date only from calender ?

I'm using Angularjs.

===========================================================================

What I tried is decorating md-datepicker directive and achieve behavior that I want like this

(function () {
'use strict';

angular.module('APPLICATION_NAME').config(['$provide', function($provide) {

    $provide.decorator('mdDatepickerDirective', [
        '$delegate',

        /**
         * @function mdDatepickerDirective
         * @description decorates mdDatepickerDirective to extend functionality:
         *              - Mark input field as read-only so which will prevent user from typing date manually
         *                and should select from date-picker calender only.
         * @param {angular.Directive} $delegate
         * @returns {angular.Directive} $delegate
         */
            function mdDatePickerDecorator($delegate) {
            var directive = $delegate[0];
            var compile = directive.compile;

            directive.compile = function (tElement) {
                var link = compile.apply(this, arguments);
                tElement.find("input").prop("readOnly", "true");
            };

            return $delegate;

        }
    ]);
}])})();

But I'm getting some errors like :

• TypeError: Cannot read property '$setTouched' of null
• TypeError: Cannot read property '$setViewValue' of null

What's wrong with element after directive decorator runs ? Pls help.

Answer 1

On focus of input box explicitly calling the datepicker which will open calendar so that user cannot edit the date.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

<div ng-app="StarterApp" ng-controller="AppController" ng-init="initDatepicker();">
    <md-content flex class="padding-top-0 padding-bottom-0" layout="row">
        <md-datepicker id="datePicker" ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
    </md-content>
</div>
<script>
  var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($scope) {


 document.querySelectorAll("#datePicker input")[0].setAttribute("readonly","readonly");
    $scope.initDatepicker = function(){
        angular.element(".md-datepicker-button").each(function(){
            var el = this;
            var ip = angular.element(el).parent().find("input").bind('click', function(e){
                angular.element(el).click();
            });
            angular.element(this).css('visibility', 'hidden');
        });
    };
});
</script>

Demo link Example

Answer 2

I've created Directive rather than applying patches or instead of directive decoration

Hope this will save somebody time.

here it is :

(function () {
'use strict';

angular.module('myApplication').directive('mcReadOnly', mcReadOnly);

/**
 * @function mcReadOnly
 * @description creates a directive which will override the behavior of md-datepicker and
 *              will not allow user to enter date manually.
 * @param
 * @returns {Directive} directive - for DOM manipulation of md-datepicker directive.
 */
function mcReadOnly() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    /**
     * @function link
     * @description link function of this directive will do following things :
     *              1. Will mark 'input' field as readonly so it will not edited/changed by user manually - can only
     *              be changed/edited by changing value from calender pane.
     *              2. When clicked upon 'input' text field of md-datepicker, It will open calender pane (like user clicked on
     *              Date picker calender icon)
     * @param {scope} - scope of directive
     * @param {element} - DOM element where directive is applied
     * @returns
     */
    function link(scope, element) {
        element.find("input")[0].setAttribute("readonly","true");
        element.find("input").bind('click', function(){
            element.find("button")[0].click();
        });
    }
}
})();

Answer 3

DO scss file

md-datepicker{ input{ pointer-events:none; } }