0

Tratando de migrar un código a Angular el cual tengo hecho en jquery, el cual es un calendario con datepicker integrado. El problema es que hay que tener en cuenta lo siguiente:

  1. Si el primer día del mes cae cualquier día que no es lunes, entonces se debe rellenar los días anteriores a este para evitar que se desorganice el calendario.
  2. Lo mismo si el ultimo día no es domingo, también hay que rellenar para no desorganizar la forma del calendario.

Aquí un ejemplo del código resumido de lo que yo hacia:

 <div>

<select>
    <option value="nombredelmes o numero del mes">Nombre del mes</option>
</select>

<div id="diasSemana">
    <div class="row">
        <p class="col">L</p>
        <p class="col">M</p>
        <p class="col">M</p>
        <p class="col">J</p>
        <p class="col">V</p>
        <p class="col">S</p>
        <p class="col">D</p>
    </div>
</div>

<div>

    <div class="row" id="uno"></div>
    <div class="row" id="dos"></div>
    <div class="row" id="tres"></div>
    <div class="row" id="cuatro"></div>
    <div class="row" id="cinco"></div>
    <div class="row" id="seis"></div>

</div>

En el codigo anterior en los id que van en ascenso, insertaba mediante append o cualquier otra forma de hacer ir colocando las fechas correspondiente a cada dia, sin olvidar, lo anterior expuesto.

Los días, fechas y demás lo obtenía mediante la librería Moment.js

3
  • Donde obtienes el año? Recuerda que la posición de los días del mes cambia de acuerdo al año.
    – devconcept
    Commented el 13 jun. 2016 a las 16:13
  • @devconcept si eso lo se, yo primero obtengo el año, a partir de alli pregunto el mes actual, y despues pregunto los dias de ese mes moment().format('MM'); // 01-02 ... 12, aqui esta la documentacion libreria Commented el 13 jun. 2016 a las 17:14
  • moment().format('YYYY'); // 2016, 2017 ... nnnn de esta forma se obtiene el año Commented el 13 jun. 2016 a las 18:26

1 respuesta 1

1

Esto lo puedes lograr con un filtro customizado. Un filtro es una funcionalidad que básicamente te permite transformar cualquier dato en cualquier cosa.

Puedes usar como entrada una cadena de caracteres 'mes/año' o 'mes' y obtener un arreglo en la salida con los días deseados.

Te dejo un demo:

angular.module('app', [])
  .controller('CalendarioCtrl', function() {
    var vm = this;
    vm.meses = [{
      nombre: 'Enero',
      numero: 1
    }, {
      nombre: 'Febrero',
      numero: 2
    }, {
      nombre: 'Marzo',
      numero: 1
    }, {
      nombre: 'Abril',
      numero: 4
    }, {
      nombre: 'Mayo',
      numero: 5
    }, {
      nombre: 'Junio',
      numero: 6
    }, {
      nombre: 'Julio',
      numero: 7
    }, {
      nombre: 'Agosto',
      numero: 8
    }, {
      nombre: 'Septiembre',
      numero: 9
    }, {
      nombre: 'Octubre',
      numero: 10
    }, {
      nombre: 'Noviembre',
      numero: 11
    }, {
      nombre: 'Diciembre',
      numero: 12
    }];
    vm.semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
  })
  .filter('calendario', function() {
    return function(input) {
      if (input) {
        var result = [];
        var year = moment().year();
        var startDay = moment(input + '/01/' + year);
        var endDay = startDay.clone().endOf('month');
        var prefix = startDay.weekday();
        var dayPrevMonth = startDay.clone().day(0).date();
        var endPrevMonth = startDay.clone().day(0).endOf('month').date();
        if (endPrevMonth - dayPrevMonth < 7) {
          for (var i = dayPrevMonth; i <= endPrevMonth; i++) {
            result.push({
              day: i,
              current: false
            });
          }
        }
        var days = startDay.daysInMonth();
        for (var i = 0; i < days; i++) {
          result.push({
            day: i + 1,
            current: true
          });
        }

        var endNextWeek = endDay.clone().day(7).date();
        for (var i = 1; i < endNextWeek; i++) {
          result.push({
            day: i,
            current: false
          });
        }

        return result;
      }
    };
  });
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header {
  font-weight: bolder;
  font-size: 12px;
}
.calendar.header .day {
  height: 30px;
}
.calendar {
  position: relative;
  width: 100%
}
.calendar .day {
  float: left;
  width: 13.8%;
  height: 100px;
  border: solid 1px lightgray;
}
.calendar .day.other {
  background-color: lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div ng-app="app" ng-controller="CalendarioCtrl as vm">
  <select ng-options="mes.numero as mes.nombre for mes in vm.meses" ng-model="vm.selected">
  </select>
  <br>
  <br>
  <div ng-if="vm.selected">
    <ul class="calendar header">
      <li class="day" ng-repeat="dia in vm.semana">{{dia}}</li>
    </ul>
    <ul class="calendar">
      <li class="day" ng-class="{other: !item.current}" ng-repeat="item in vm.selected | calendario track by $index">
        {{item.day}}
      </li>
    </ul>
  </div>
</div>

Por supuesto que el ejemplo tiene algunos problemas como utilizar el primer día de la semana de acuerdo a la configuración regional y el formato de entrada de las fechas por lo que te recomiendo que uses una librería profesional cuando intentes realizar tareas como esta.

Aqui te dejo el link de una muy popular

https://github.com/angular-ui/ui-calendar

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.