Options de configuration à datepicker dans angular-ui bootstrap

Je suis en train d'utiliser composant datepicker de angular-ui bootstrap lib comme décrit ici: http://angular-ui.github.io/bootstrap/
Et j'essaie de définir les options de la fenêtre contextuelle du sélecteur et du accoriding à la documentation que je devrais passer des options pour datepicker JSON à l'aide de la datepicker-l'attribut options.

De mon point de vue j'ai:

        <div class="row">
        <div class="col-md-6">
            <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
            </p>
        </div>
    </div>

Et dans mon contrôleur, j'ai:

    $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.showWeeks = false;

    $scope.clear = function () {
        $scope.dt = null;
    };

    $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
    };
    $scope.toggleMin();

    $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
    };

    $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
    };
    $scope.format = 'dd/MM/yyyy'

Comme vous pouvez le voir au début, j'ai essayer de définir les options:

 $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

cependant, il ne semble pas fonctionner, le datepicker ne change pas.
Les idées de ce que je fais mal?

Vous êtes l'ombre à la première dateOptions avec le second vers le bas. Avez-vous essayé de combiner les deux asssignments en un seul objet?
C'est vrai, cependant, la fusion des deux affectations n'ont pas d'aide.

OriginalL'auteur Jakub | 2014-04-28

  1. 11

    J'ai trouvé la solution, j'ai mis les options comme les attributs, par exemple:

       <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2014-12-31'" datepickerOptions="dateOptions" ng-required="true" show-button-bar="false"/>

    alors j'ai mis show-barre de bouton que l'attribut et non pas comme une partie de l'objet passé en datepickerOptions.

    datepickerOptions devrait probablement être datepicker-options, mais cette solution ne fonctionne pas.

    OriginalL'auteur Jakub

  2. 8

    Vous utilisez dash-tubé noms d'option. Ces dash-tubé noms ne sont nécessaires que lorsque les utiliser comme de simples attributs d'un élément. c'est à dire 

    <input type="text" datepicker-popup="{{format}}" starting-day="1" ng-model="dt" >

    Cependant datepicker-options attend nommé options en json avec camelcase format suivant:

    datepicker-options="{startingDay: 1, yearFormat: 'yy'}"

    <input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{startingDay: 1, yearFormat: 'yy'}" ng-model="dt" >

    ou

    $scope.options = {
    'startingDay': 1,
    'yearFormat': 'yy'
}

<input type="text" datepicker-popup="{{format}}" 
       datepicker-options="{{options}}" ng-

    L'attribut starting-day="1" doivent également travailler sur le datepicker d'entrée, comme l'a dit à https://angular-ui.github.io/bootstrap/#/datepicker, mais je n'arrive pas à obtenir que le travail (à l'aide de la version 0.12.1)

    quelle est l'utilité de faire des yearFormat: "aa", dans les options?
    Je ne sais pas l'utilisation de la " aa " option. C'était juste une (de travail) par exemple. Voir docs.angularjs.org/api/ng/filter/date pour les formats disponibles dans angulaire. J'ai utilisé "aa", car la valeur par défaut est déjà "aaaa". Voir angular-ui.github.io/bootstrap/#/datepicker pour les paramètres par défaut

    OriginalL'auteur Marcel

  3. 5

    Je sais que ce une vieille question, mais je pensais que je serais point où vous avez eu probablement de la difficulté.

    Dans votre contrôleur, vous attribuez à $scope.dateOptions deux fois et donc d'écraser votre première affectation.

    De sorte que votre affectation initiale de:

    $scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};

    Est écrasé lorsque vous faites cela, vers la fin:

    $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
};

    OriginalL'auteur Craig Sketchley

  4. 5

    Selon datePicker la documentation, popup paramètre peut être configuré à l'échelle mondiale par le biais de la datepickerPopupConfig, de sorte que vous devez l'ajouter dans votre contrôleur.

    yourApp.controller('YourController', function ($scope, datepickerPopupConfig) {
  datepickerPopupConfig.showButtonBar = true;
  datepickerPopupConfig.closeText = 'I am done';
  datepickerPopupConfig.clearText = 'Wipe it out';
}

    Réglage closeText ne fonctionne pas pour une raison quelconque. Je ne sais pas pourquoi.

    Exemple sur Plunker pour jouer.

    OriginalL'auteur Martin Bajcar

  5. 1

    datepicker-options a été introduit dans la version 0.11 donc, assurez-vous d'utiliser angular-ui-démarrage de la version 0.11 ou plus

    OriginalL'auteur kazuar

  6. 0

    Ressemble votre dateOptions clés de l'objet ne sont pas camelcase. Essayez ceci:

    $scope.dateOptions = {
    'showButtonBar': 'false', 
    'closeText':'SomeText'
};

    Attributs Html doit être dash-tubé, comme show-button-bar, ou close-text, etc.

    Notez la différence entre les datepicker-options attribut html et la datepickerOptions objet javascript.

    OriginalL'auteur Andrei Cojea

  7. 0

    Il suffit de fournir près de texte, le courant de texte et les attributs de texte dans l'entrée 🙂 

    <input type="text" uib-datepicker-popup ng-model="dt" is-open="popup2.isopen" datepicker-options="dateOptions" ng-required="true" close-text="your close text here" current-text="Your current text here (today for example)" clear-text="Your clear-text here"/>

    OriginalL'auteur Luis Cabrera Benito

  8. -1

    Le site est assez lite sur des exemples. Pour moi, avec la version 1.1.1, je suis passé dans la config de l'objet comme un attrib:

    datepicker-options="datepickerOptions"

    Et dans le contrôleur, a été en mesure de régler certaines options:

    $scope.datepickerOptions = {
    formatYear: 'yy',
    startingDay: 0,
    showWeeks: false
};

    Mais " showButtonBar ne veut pas coopérer, afin de regarder à travers le code, j'ai vu 'uibDatepickerPopupConfig'. Je passe que dans et et de le définir séparément et ça fonctionne:

    .controller('DatepickerCtrl', function ($scope, uibDatepickerPopupConfig){

    uibDatepickerPopupConfig.showButtonBar = false;

    Avec "datepickerPopupConfig" je reçois l'erreur du fournisseur de:

    Unknown provider: datepickerPopupConfigProvider <- datepickerPopupConfig
    Ce n'est pas vraiment répondre à la question. Si vous avez une autre question, vous pouvez le demander en cliquant Poser une Question. Vous pouvez aussi ajouter une prime pour attirer plus d'attention à cette question une fois que vous avez assez de réputation. - Revue
    Je viens de l'expansion sur les réponses précédentes, avec quelques détails plus pertinents pour 2016, mais je suppose que j'aurais pu le faire que par l'intermédiaire d'un commentaire.

    OriginalL'auteur bobvan