Estoy tratando de usar angular-ui datepicker como un mes selector. Pero no es capaz de configurarlo, lo intentó todo. Aquí está el PLUNKER.

Traté de establecer los modos como

          <input type="text" class="form-control col-md-3" 
          datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
          ng-model="dt" is-open="opened" close-on-date-selection="true"
          datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
          show-button-bar="false" show-weeks="false"/>
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>

Y también como parte de: datepicker-opciones, usando JS como

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

Pero que también es no trabajar. Por favor, ayudar

  • Parece estar funcionando bien. Usted tiene datepicker-popup="MMM-yyyy" para datepicker-popup atributo en el campo de entrada que indica el mes y el año cuando se elige una fecha. Si desea mostrar el día como uso datepicker-popup="dd-MMM-yyyy" para la datepicker-popup attributte.
  • es la visualización de un mes, que está bien.. pero cuando la ventana emergente que se abre se muestra un selector de fecha y no mes selector de…
  • Ver este codepen.io/anon/pen/gmqrH
  • ya hemos visto que… pero no funciona cuando la fecha se abre en ventana emergente
  • Sí, parece que en la actualidad sólo se admite cuando se utiliza como inline selector de fecha, pero no se para en la ventana de selector de fecha
  • El verdadero problema creo que es que los modos especificados como cadenas literales no son compatibles por ahora. Usted tiene que usar un enlace. Lo mismo se aplica a otras opciones [‘minDate’, ‘maxDate’, ‘datepickerMode’, ‘initDate’, ‘shortcutPropagation’] así. El seguimiento de este problema
  • El angular-bootstrap 0.13.0 funcionó para mí en el modo inline, 0.11.0 trabajado muy bien y puedo usar el min-mode=»mes».

InformationsquelleAutor harishr | 2014-05-19

7 Comentarios

  1. 52

    Para aquellas personas que se enfrentan a este problema, he probado un montón de cosas y aquí es el método más simple que he encontrado:

    <input type="text" class="form-control" datepicker-popup="MM/yyyy" ng-model="dt" is-open="opened" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>

    El truco es que usted debe poner datepicker-options="{minMode: 'month'}" datepicker-mode="'month'" en el input etiqueta. Esto funcionó muy bien para mí.

    • Ugh, finalmente una solución. Gracias! Este componente datepicker en AngularUI es totalmente disfuncional.
  2. 19

    Acaba de escribir estas líneas:

    HTML

     <datepicker ng-model="date" min-mode="month" datepicker-mode="'month'"></datepicker>

    JS

    $scope.date = new Date();

    ** * * * No olvides incluir necesario js/css archivos de http://angular-ui.github.io/bootstrap/

    De estos por encima de código funcionó para mí. 🙂 Sé que es demasiado tarde, pero puede ayudar a alguien.

  3. 5

    No podía conseguir que esto funcione como un mes selector bien, pasé horas y horas probando diferentes opciones. Deseo he comprobado el código fuente anterior resulta el tipo de entrada es la clave.

    Para cambiar a mes selector de modo de cambiar el tipo de entrada a «mes». Esto funciona tanto para el pop-up y en variantes de la línea.

    Siguiente, desde el ejemplo en https://angular-ui.github.io/bootstrap/ usted podría hacer esto:

    <input type="month" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
    
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  4. 4

    He arreglado esto mediante la actualización de la interfaz de usuario de bootstrap 0.13.0 a 0.13.1. Este es mi lenguaje:

    <input type="text" ng-model="DOB" datepicker-popup="MM-dd-yyyy" datepicker-mode="'year'" is-open="dobOpen" ng-click="dobOpen = true" />
    • Esta es la solución para cualquier persona que utilice la versión ~0.13.0
  5. 1

    Por favor buscar debajo de mi costumbre directiva y html

    Directiva:

    angular.module('myModule')
    .directive('myDatepicker', function () {
    return {
    restrict: 'E',
    replace: true,
    controller: DatePickerController,
    controllerAs: 'vm',
    scope: {
    dt: '=',
    datestyle: '@',
    datepickermode: '@',
    minmode: '@',
    mindate: '=',
    maxdate: '='
    },
    link: function (scope, $scope, $element) {
    },
    templateUrl: './datepicker.html'
    };
    })
    .controller('DatePickerController', DatePickerController);
    DatePickerController.$inject = ['$scope'];
    function DatePickerController($scope) {
    var vm = this;
    if ($scope.datepickermode) {
    vm.DatepickerMode = $scope.datepickermode;
    } else {
    vm.DatepickerMode = 'day';
    }
    if ($scope.minmode) {
    vm.MinMode = $scope.minmode;
    } else {
    vm.MinMode = 'day';
    }
    if ($scope.mindate) {
    vm.MinDate = new Date($scope.mindate);
    } else {
    vm.MinDate = new Date('1000/01/01');
    }
    if ($scope.maxdate) {
    vm.MaxDate = new Date($scope.maxdate);
    } else {
    vm.MaxDate = new Date('9999/12/31');
    }
    vm.dateOptions = {
    datepickerMode: vm.DatepickerMode,
    minMode: vm.MinMode,
    minDate: vm.MinDate,
    maxDate: vm.MaxDate
    };
    vm.openCalendar = function () {
    if (!$scope.dt) {
    $scope.dt = new Date(Date.now());
    }
    vm.dateOptions = {
    datepickerMode: vm.DatepickerMode,
    minMode: vm.MinMode,
    minDate: vm.MinDate,
    maxDate: vm.MaxDate
    };
    vm.popupCalendar.opened = true;
    };
    vm.popupCalendar = {
    opened: false
    };
    vm.changeValue = function () {
    vm.popupCalendar.opened = true;
    };
    vm.prev = function () {
    refreshDate(-1);
    };
    vm.next = function () {
    refreshDate(1);
    };
    function refreshDate(cnt) {
    var buf = new Date($scope.dt);
    var bufDate = buf.getDate();
    var bufMonth = buf.getMonth();
    var bufYear = buf.getFullYear();
    var changeDate;
    switch (vm.MinMode) {
    case 'day':
    bufDate = bufDate + cnt;
    changeDate = new Date(bufYear, bufMonth, bufDate);
    break;
    case 'month':
    bufMonth = bufMonth + cnt;
    changeDate = new Date(bufYear, bufMonth, '01');
    break;
    case 'year':
    bufYear = bufYear + cnt;
    changeDate = new Date(bufYear, 0, 1);
    break;
    }
    if (changeDate >= vm.MinDate && changeDate <= vm.MaxDate) {
    $scope.dt = changeDate;
    }
    }
    }

    Por favor coloque su código correspondiente en datepicker.html se utiliza en la templateUrl de la directiva para mostrar el control, como por sus necesidades

    Mi muestra datepicker.html:

    <a type="button" class="btn btn-default btn-black btn-sm" name="day-before" ng-click="vm.prev()"><i class="fa fa-caret-left"></i></a>
    <input type="text" uib-datepicker-popup="{{datestyle}}" ng-model="dt" class="btn btn-default btn-black btn-sm datetime-change input-day"
    is-open="vm.popupCalendar.opened" ng-required="true" ng-click="vm.openCalendar()"
    datepicker-options="vm.dateOptions" show-button-bar="false" show-weeks="false" close-on-date-selection="true" readonly />
    <a type="button" class="btn btn-default btn-black btn-sm" name="day-after" ng-click="vm.next()"><i class="fa fa-caret-right"></i></a>

    Mi código Html en el archivo final donde yo estoy usando el contorl :

    <my-datepicker dt="vm.requestDate"  //bind this to your controller
    datepickermode="month"
    minmode="month"
    datestyle="yyyy/MM"
    mindate="vm.MinDate" maxdate="vm.MaxDate"/>

    Angular de la interfaz de usuario de mes selector de

    Al hacer clic en las flechas anterior y siguiente, mes decrementos e incrementos respectivamente

  6. 0

    Yo todavía estaba recibiendo el mismo tipo de problemas a pesar de la adición de los mencionados atributos. La única diferencia que tenía de @LVarayut la respuesta fue que tenía datepicker-options="date.dateOptions" atributo en la entrada, que fue el causante de FECHA el selector de a mostrarse.

    La eliminación de la datepicker-opciones habilitadas en el Mes de Selector.

  7. -1

    Puede intentar varios-mes-selector de

    Le ayuda a seleccionar varios meses. Es un AngularJS widget, por lo que no debería ser muy útil para usted.

    He mencionado a continuación cómo ponerlo en práctica en el proyecto.

    HTML

    <input type="text" multiple-month-picker />

    JS

    //Initiate your app module and inject 'mmp-morfsys'
    var app = angular.module('app-name', ['mmp-morfsys']);

    Tan fácil como eso!!

    • La respuesta no es pertinente a la cuestión

Dejar respuesta

Please enter your comment!
Please enter your name here