Comment personnaliser le sélecteur de date de matériel angulaire?

Je suis en utilisant la conception de matériel de sélecteur de date

<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex></md-datepicker>
            </md-content>

et sa montre l'INTERFACE utilisateur comme ceci
Comment personnaliser le sélecteur de date de matériel angulaire?

Je veux enlever l'icône de calendrier et d'inclure la ng-cliquez sur la fonctionnalité dans la zone d'entrée.

Comment lier l'exécution de l'événement avec la zone d'entrée?

css

<style>
 .inputdemoBasicUsage .md-datepicker-button {
    width: 36px; }
    .inputdemoBasicUsage .md-datepicker-input-container {
    margin-left: 2px;
  }
    .md-datepicker-input-container{
    display:block;
    }
    .md-datepicker-input[placeholder]{
        color=red;
    }

    .padding-top-0{
    padding-top:0px;}

    .padding-bottom-0{
    padding-bottom:0px;
    }
</style>

source d'informationauteur atjoshi

  1. 5

    à l'aide de la réponse, j'ai modifié cette ligne pour afficher les meilleures:

    .md-datepicker-input-container {
  width: 100%;
  margin-left: 0px;
}
  2. 2

    Supplémentaires à @EmirMarques réponse, je voulais faire le champ de saisie en lecture seule. j'ai donc ajouté ce code. Ici, l'utilisateur ne peut pas modifier la date d'entrée. de sorte que son

    Meilleur

    $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(el).parent().find("input").prop('readonly', true);
            angular.element(this).css('visibility', 'hidden');
        });
};

    Et CSS les mieux

    .md-datepicker-input-container {
    display: block;
    margin-left: 0 !important;
    width: 100% !important;;
}