2016-09-19 3 views
0

Ich bin neu in Angular JS und ich habe Probleme mit dem Verbergen der Woche Spalte in eckigen UI Bootstrap Date Picker Popup. Ich habe den Wert in der Angular Js-Datei in false geändert, aber die Wochenspalte wird nicht ausgeblendet. Unten ist die Verbindung zu Plunker.Die Wochenspalte kann nicht ausgeblendet werden Angular UI Bootsrap

Ich würde auch gerne wissen, ob das Styling des Kalenders geändert werden kann, so dass ich den Monat und das Jahr als 2 getrennte Dropdown-Menüs teilen kann.

plunker link

$scope.inlineOptions = { 
    customClass: getDayClass, 
    minDate: new Date(), 
    showWeeks: false 
    }; 

Antwort

1

In ui-bootstrap-tpls-2.1.3.js

.constant('uibDatepickerConfig', { 
datepickerMode: 'day', 
formatDay: 'dd', 
formatMonth: 'MMMM', 
formatYear: 'yyyy', 
formatDayHeader: 'EEE', 
formatDayTitle: 'MMMM yyyy', 
formatMonthTitle: 'yyyy', 
maxDate: null, 
maxMode: 'year', 
minDate: null, 
minMode: 'day', 
monthColumns: 3, 
ngModelOptions: {}, 
shortcutPropagation: false, 
showWeeks: true, <<---------- SET THIS AS FALSE 
yearColumns: 5, 
yearRows: 4 
}) 

gesetzt showWeeks als falsch.

können Sie der rechten Maustaste auf Woche und tun Inspect Element zu sehen, wie es ist bevölkert zu werden.

Für zB:

<td ng-if="showWeeks" class="text-center h6 ng-scope"> 
    <em class="ng-binding">38</em> 
</td> 

Hier können Sie ng-if Richtlinie sehen, die uns die Woche Spalte machen.

Zum Ändern der Stile können Sie entweder das vorhandene Direktivenstyling ändern oder eine andere benutzerdefinierte Direktive mit dem gewünschten Styling finden. Es gibt viele Anweisungen, versuchen Sie es zu googlen (es ist eine gute Angewohnheit;)) und lassen Sie mich wissen, wenn Sie nicht finden können. Ich werde dann einige Links bereitstellen.

Update 2:

Für das Eingabefeld macht nur auf Klick zu arbeiten, readonly in input Feld hinzufügen.

Etwas wie:

<input type="text" readonly 
      class="form-control" 
      uib-datepicker-popup="{{format}}" 
      ng-model="dt" 
      is-open="popup1.opened" 
      datepicker-options="dateOptions" 
      ng-required="true" close-text="Close" 
      alt-input-formats="altInputFormats" 
      ng-click="open1()" 
      /> 
+0

super dank Shashank. Hat gut funktioniert. Gibt es eine Möglichkeit, den Stil des Kalenders so zu ändern, wie ich es im zweiten Teil meiner Frage gefragt habe? – prithvi

+0

Seine CSS-Styling, entweder ändern bestehende oder neue finden. Ich schlage vor, dass Sie mit google –

+0

einen neuen finden Danke wird überprüft. – prithvi

Verwandte Themen