Material: md-datepicker readonly

[dpatinor]

You can restrict the entry of the date manually?, You can use 'readonly'?

... md-min-date="minDate" md-max-date="maxDate" readonly="readonly">

For me this is not working.

[scspijker]

I also have this problem, it is worsened because the manual input by the user is completely ignored by md-datepicker (model does not update). So I have users that manually enter a date (because faster), and this causes the form to not show validation errors, but still not validate (because md-datepicker is empty, but input is filled). So :+1:

[bojancai]

+1

[dpatinor]

@scspijker Exactly that was the problem I had, the immediate solution was not to use the md-datepicker.

For correct operation, the manual input should not be ignored by the model.
Also it would be a plus to have the option of restricting the manual input.

[sam-g-roberts]

+1

same issue with users attempting to use manual input and md-datepicker model not updating or validating

[ashwinputhige]

Please add a way to disable manual entry of dates.

[peio72]

+1

[scspijker]

@ThomasBurleson: this is fixed in a new release?

[jayeshanandani]

The issue was in backlog or deprecated. Refer this: Spring Cleaning 2016

[mkakkar81]

Please help me in resolving this issue as we are receiving lots of production issues wherein user inputs any date format or junks in textbox and complaint that data not saved properly.

[cust0m]

Any workaround to do this?

[zloom]

+1

[josepfdc]

it would be interesting to implement this feature in md-datepicker
+1

2016-09-09 13:41 GMT+02:00 Anton [email protected]:

+1

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/5043#issuecomment-245890221,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AM-mQ1pzQcyWXpywevf4rG9d0BAt5Nn5ks5qoUXSgaJpZM4GKL93
.

[j-o-d-o]

You can do this <md-datepicker ... onkeydown="return false"></md-datepicker. It might confuse users though that nothing happens when they press a key!!

[julioponce]

is "readonly" working now on datepicker? :/

[andrejvidic]

In certain scenarios I am using the md-datepicker tag just to display the date. So I just added ng-disabled="true" as no user interaction with the date picker object was required

[dftrujillo]

Maybe you can use this option. You can set readonly property to input created by md-datepicker. Just you must validate that page is loaded before set the property.
In my case i'm using angularjs controller, then i wrote something like this

$scope.$on('$viewContentLoaded', function(event) {
  $("input.md-datepicker-input").prop('readonly', true);
});

input.md-datepicker-input is the css applied to md-datepicker input. That works for me

[edoardoVD]

well well well...
in my case I ended up implementing

(click)="picker.open()" onkeydown="return false"

<md-input-container class="example-full-width">
        <input (click)="picker.open()" onkeydown="return false" mdInput [mdDatepicker]="picker" [min]="minDate" [mdDatepickerFilter]="excludeWeekEnds" placeholder="Select event date">
        <button mdSuffix [mdDatepickerToggle]="picker"></button>
    </md-input-container>
    <md-datepicker touchUi="true" #picker></md-datepicker>

[ngDevendra]

I know this post is quite old - and may other have found out their solutions (posting my version of solution)

Solution One : Created new Directive which will achieve this :

(function () 
{
    angular.module('APPLICATION_NAME').directive('readOnly', readOnly);

    function readOnly() {
        var directive = {
            restrict: 'A',
            link: link
        };

        return directive;

        function link(scope, element) {
            element.find("input")[0].setAttribute("readonly","true");
            element.find("input").bind('click', function(){
                element.find("button")[0].click();
            });
        }
    }
})();

Solution Two : Create Decorator for existing md-datepicker directive

(function () {
    'use strict';

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

        $provide.decorator('mdDatepickerDirective', [
            '$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")[0].setAttribute("readonly","true");
                    tElement.find("input").bind('click', function(){
                  tElement.find("button")[0].click();
                    });
                };

                return $delegate;
            }
        ]);
    }])
})();

[shinde-prasad]

I have used above code in config block, getting error $touchDelegate null.

Succeed to get it done using onkeydown="return false;".