How to Angular Material datepicker leave/keep opened

1
votes

I've tried with md-blur md-focus, each fails. I'm using Angular Material 1.1.3 and i need to keep datepicker opened after date picked action. So, how to keep it opened, after this action. Anybody can help?

1
angularjsdatepickerangularjs-material
Could you please add some codes or a plnkr/fiddle? – lin
codepen.io/anon/pen/RpezmL?editors=101 here – Lukas
Try md-is-open, It will open the datepicker's calendar on-demand. – Kalyan Singh Rathore
@KalyanSinghRathore did you read what i wrote? :) – Lukas
@Lukas thanks. That would be great. – lin

1 Answers

1
votes

Due to the md-datepicker documentation you can't achieve this. ngMaterials is good but comes with a lot of limitations. You can 'fake' this by using md-calendar like in this runnable demo codepen.

View

<div ng-app="MyApp" ng-controller="MyController" layout-padding>
    {{ date }}<br /> 
    <input type="date" ng-model="date" ng-click="openDatePicker()" ng-show="!datePickerOpened">
    <md-calendar class="fixed-calendar" ng-show="datePickerOpened" ng-model="date"></md-calendar>
</div>

CSS

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
}

Application

angular
    .module('MyApp', ['ngMaterial'])
    .controller('MyController', function($scope, $timeout) {

    //Init
    $scope.datePickerOpened = false;
    $scope.date = new Date();

    //show datepicker action
    $scope.openDatePicker = function () {

        //show datepicker
        $scope.datePickerOpened = true

        //avoid date set to 1933 by async reinit date after ng-show rendering
        $timeout(function () {
             $scope.date = new Date();
        });
    }
});