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

admin管理员组

文章数量:1335138

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 pile = directivepile;

            directivepile = function (tElement) {
                var link = pile.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.

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 pile = directive.pile;

            directive.pile = function (tElement) {
                var link = pile.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.

• javascript
• angularjs
• datepicker
• angular-material
• readonly-attribute

Share Improve this question Follow edited Sep 11, 2017 at 12:20 Enigma asked Sep 11, 2017 at 9:47 EnigmaEnigma 85911 gold badge1818 silver badges3636 bronze badges 2

• Some workarounds in this github thread. Maybe it helps – troig Commented Sep 11, 2017 at 10:30
• @troig no solution worked me for gitHub thread - I already tried that. – Enigma Commented Sep 11, 2017 at 11:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

DO scss file

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

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();
        });
    }
}
})();

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

<link rel="stylesheet" href="https://ajax.googleapis./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

本文标签： javascriptmddatepickerInput field should be readonlyNo manual date entry allowedStack Overflow