example - datepicker angularjs

Angular UI Datepicker Limitar días a un mes

Question

Estoy usando el datepicker para AngularUI .

Por defecto, enumera los días del mes anterior y el mes siguiente. Aquí hay una foto.

¿Cómo hago que estos días sean invisibles? Me gustaría que el primer día sea siempre el domingo. Por lo tanto, los días deben estar listados el domingo, el lunes, el martes, etc. en la parte superior de las columnas.

Answer 1

Puedes hacer esto con css:

.text-muted {
  color: transparent;
}

http://plnkr.co/EOS6geIcM5KO6tBwlxZF

Pero, probablemente necesite hacerlo más específico para evitar interferir con otros elementos de arranque que pueden usar text-muted .

Actualizar Para ir más allá y deshabilitar los días ahora invisibles, puede personalizar la función de disable que ng-disable hace referencia en cada día. Por ejemplo:

$scope.disabled = function(date, mode) {
  return date.getMonth() !== $scope.dt.getMonth();
};

Esto es demasiado simplista, pero funciona para la fecha inicial y debe comenzar.

Answer 2

Modifiqué el bloque de código de creación day.html en el archivo angularUI (en mi caso, el nombre del archivo es ui-bootstrap-tpls-0.12.1.js ) oculto el botón de fecha cuando dt.seconday es verdadero. ng-hide = / "dt.secondary /"

bloque de código actualizado se ve como

    angular.module("template/datepicker/day.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/day.html",
    "<table role=/"grid/" aria-labelledby=/"{{uniqueId}}-title/" aria-activedescendant=/"{{activeDateId}}/">/n" +
    "  <thead>/n" +
    "    <tr>/n" +
    "      <th><button type=/"button/" class=/"btn btn-default btn-sm pull-left/" ng-click=/"move(-1)/" tabindex=/"-1/"><i class=/"glyphicon glyphicon-chevron-left/"></i></button></th>/n" +
    "      <th colspan=/"{{5 + showWeeks}}/"><button id=/"{{uniqueId}}-title/" role=/"heading/" aria-live=/"assertive/" aria-atomic=/"true/" type=/"button/" class=/"btn btn-default btn-sm/" ng-click=/"toggleMode()/" tabindex=/"-1/" style=/"width:100%;/"><strong>{{title}}</strong></button></th>/n" +
    "      <th><button type=/"button/" class=/"btn btn-default btn-sm pull-right/" ng-click=/"move(1)/" tabindex=/"-1/"><i class=/"glyphicon glyphicon-chevron-right/"></i></button></th>/n" +
    "    </tr>/n" +
    "    <tr>/n" +
    "      <th ng-show=/"showWeeks/" class=/"text-center/"></th>/n" +
    "      <th ng-repeat=/"label in labels track by $index/" class=/"text-center/"><small aria-label=/"{{label.full}}/">{{label.abbr}}</small></th>/n" +
    "    </tr>/n" +
    "  </thead>/n" +
    "  <tbody>/n" +
    "    <tr ng-repeat=/"row in rows track by $index/">/n" +
    "      <td ng-show=/"showWeeks/" class=/"text-center h6/"><em>{{ weekNumbers[$index] }}</em></td>/n" +
    "      <td ng-repeat=/"dt in row track by dt.date/" class=/"text-center/" role=/"gridcell/" id=/"{{dt.uid}}/" aria-disabled=/"{{!!dt.disabled}}/">/n" +
    "        <button type=/"button/" style=/"width:100%;/" class=/"btn btn-default btn-sm/" ng-class=/"{''btn-info'': dt.selected, active: isActive(dt)}/" ng-click=/"select(dt.date)/" ng-disabled=/"dt.disabled/" ng-hide=/"dt.secondary/" tabindex=/"-1/"><span ng-class=/"{''text-muted'': dt.secondary, ''text-info'': dt.current}/">{{dt.label}}</span></button>/n" +
    "      </td>/n" +
    "    </tr>/n" +
    "  </tbody>/n" +
    "</table>/n" +
    "");
}]);

Answer 3

He agregado una nueva clase (btn-secon) al botón, si es dt.secondary usando la directiva existente ng-class. Luego escribió css apuntando a esta clase para ocultar ese botón configurando display: none. El código del botón ahora se verá de la siguiente manera:

    <button type=/"button/" style=/"width:100%;/" class=/"btn btn-default btn-sm/" ng-class=/"{''btn-info'': dt.selected, active: isActive(dt), ''btn-secon'': dt.secondary}/" ng-click=/"select(dt.date)/" ng-disabled=/"dt.disabled/" ng-hide=/"dt.secondary/" tabindex=/"-1/">
<span ng-class=/"{''text-muted'': dt.secondary, ''text-info'': dt.current}/">{{dt.label}}</span>
    </button>

Answer 4

Puedes intentar esto;

function hideDates(){
   var span = document.getElementsByClassName("text-muted");
   for(var i = 0; i<span.length;i++){
     span[i].parentNode.classList.add(''remove-borders'');
   }
}
Call hideDates() function on every Month change. You can hide the dates.
In css:
.remove-borders{
  border: none !important;
}
.text-muted{
  color:transparent;
}
table tr td button.remove-borders:hover,
table tr td button.remove-borders:active,
table tr td button.remove-borders:focus{
   background: #fff;
   color: #fff;
   pointer-events: none;
   outline: none;
}

Esto eliminará los bordes del parentNode que es un botón. Por lo tanto, no mostrará las fechas del mes anterior y del mes siguiente. Tenga en cuenta que estamos ocultando las fechas solo con el CSS.