web-dev-qa-db-fra.com

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

J'utilise le sélecteur de date de conception matérielle 

<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  enter image description here

Je souhaite supprimer l'icône du calendrier et inclure la fonctionnalité ng-click dans la zone de saisie. 

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

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>
javascripthtmlcssangularjsangular-material
12
atjoshi

Utilisez la fonction pour manipuler un événement et masquer l'image du calendrier en tant que:

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppController', function($scope) {
    $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');
        });
    };
});
.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;
}
<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 ng-model="user.submissionDate1" md-placeholder="Start date" flex ng-click="ctrl.openCalendarPane($event)"></md-datepicker>
        <md-datepicker ng-model="user.submissionDate2" md-placeholder="Due date" flex></md-datepicker>
    </md-content>
</div>

16
Emir Marques

en utilisant la réponse ci-dessus, j'ai changé cette ligne pour mieux afficher:

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

Outre la réponse de @EmirMarques, je souhaitais que le champ de saisie soit en lecture seule. donc j'ai ajouté ce code. Ici, l'utilisateur ne peut pas éditer le champ de saisie de la date. alors c'est 

Le 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 ce CSS a amélioré le look

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

Pourquoi ne pas utiliser la fonctionnalité AngularJs MD?

  • md-hide-icons = "all | triangle | calendar": pour masquer tous les boutons/triangle ou calendrier;
  • Et md-open-on-focus pour ouvrir le sélecteur de date dans la zone de saisie, cliquez sur.

<md-content flex class="padding-top-0 padding-bottom-0" layout="row">
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Start date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
                <md-datepicker ng-model="user.submissionDate" md-placeholder="Due date" flex md-hide-icons="calendar" md-open-on-focus></md-datepicker>
            </md-content>

0
A. Salim