0

Estoy trabajando con la libreria TimePicker,y angularjs, para empezar tengo un campo tipo text en donde con el boton Configurar hora muestro el input y selecciono la hora,despues de eso la oculto con el botón Ocultar y al volver a clickear el botón Configurar hora pasa el error, y es que la segunda vez el evento on('change') ya no sucede, he tratado de solucionarlo con esta pregunta, tratar de remover event listeners antes de llamarlo de nuevo pero no funciono, dejo un ejemplo en donde se replica el error:

var app = angular.module('app', []);

app.controller('ctrl',function($scope){

    
    $scope.changevalue = () => {
      $scope.configurar = true;
      this.resetTime();
     
    }
    
    $scope.ocultar = () => {
      $scope.configurar = false;
    }
      
    this.resetTime = () => {
      setTimeout(function(){ 
          var timepicker =  new TimePicker('timePicker', {lang: 'en', theme: 'dark'});
  
          timepicker.on('change', function(evt) {
              // este evento solo sucede una vez
              console.log("evt",evt)
              var value = (evt.hour || '00') + ':' + (evt.minute || '00');
              evt.element.value = value;
          }); // fin on change
      }, 200);// fin timeOut
    }// fin resetTime

})
*,:after,:before{box-sizing:border-box;margin:0;padding:0}._jw-tpk-container{position:absolute;width:250px;height:140px;padding:0;background:#fff;font-family:inherit;font-weight:400;overflow:hidden;border-radius:3px;box-sizing:border-box;max-width:250px;margin-left:auto;margin-right:auto;line-height:1rem;font-size:1rem}._jw-tpk-container:after{content:" ";display:block;clear:both}._jw-tpk-container *,._jw-tpk-container :after,._jw-tpk-container :before{box-sizing:border-box}._jw-tpk-container *,._jw-tpk-container .active,._jw-tpk-container :focus,._jw-tpk-container :hover{text-decoration:none;outline:none}._jw-tpk-container._jw-tpk-dragging{opacity:.85!important}._jw-tpk-container._jw-tpk-dragging ._jw-tpk-header{cursor:-webkit-grabbing;cursor:grabbing}._jw-tpk-container ol{text-align:center;list-style-type:none}._jw-tpk-container ol>li{display:inline-block}._jw-tpk-container ol>li>a{display:inline-block;padding:3px 0;width:25px;color:inherit;border-radius:3px;border:1px solid transparent;font-size:1.2rem}._jw-tpk-container ol>li>a:not(._jw-tpk-selected):hover{cursor:pointer;border:1px solid #ccc;border-right:1px solid #aaa;border-bottom:1px solid #aaa;background:#f5f5f5;background:-webkit-linear-gradient(#e6e6e6,#f5f5f5);background:linear-gradient(#e6e6e6,#f5f5f5);box-shadow:0 2px 3px hsla(0,0%,86%,.8)}._jw-tpk-header{position:relative;font-weight:600;text-align:center;cursor:-webkit-grab;cursor:grab;line-height:1.875rem}._jw-tpk-header:after,._jw-tpk-header:before{content:"";display:table}._jw-tpk-header:after{clear:both}._jw-tpk-body{padding:2px 0}._jw-tpk-body:after,._jw-tpk-body:before{content:"";display:table}._jw-tpk-body:after{clear:both}._jw-tpk-hour{width:64.49275%;float:left;margin-right:1.44928%}._jw-tpk-minute{width:34.05797%;float:right;margin-right:0}._jw-tpk-dark{color:#212121;box-shadow:inset 0 0 0 1px #212121}._jw-tpk-dark ._jw-tpk-header,._jw-tpk-dark ol>li>a._jw-tpk-selected{color:#f5f5f5;background:-webkit-linear-gradient(#212121,#545454);background:linear-gradient(#212121,#545454)}._jw-tpk-blue-grey{color:#263238;box-shadow:inset 0 0 0 1px #263238}._jw-tpk-blue-grey ._jw-tpk-header,._jw-tpk-blue-grey ol>li>a._jw-tpk-selected{color:#cfd8dc;background:-webkit-linear-gradient(#263238,#4f6875);background:linear-gradient(#263238,#4f6875)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>


<div ng-app="app">
  <div ng-controller="ctrl">
      
      <button name="button" ng-click="ocultar()">Ocultar</button>
      <button name="button" ng-click="changevalue()">Configurar hora</button>
      <input type="text" class="form-control" id="timePicker" data-ng-if="configurar"  ng-model="hora"     autocomplete="off">
  </div>
</div>

2
  • 1
    Hmm, te recomendaría no llamar al timepicker desde otra función, el evento change ya va a estar a la espera de que el valor cambie. el 27 abr. 2021 a las 2:32
  • @Eduardo como podría llamarlo? , Actualmente lo hago así por qué el input aparece y se oculta, lo que provoca cambio en el Dom, agradezco cualquier aporte
    – 404
    el 27 abr. 2021 a las 2:40

1 respuesta 1

0

Incluí la solución con JS puro, puesto que no he estudiado Angular pero el concepto es el mismo y su equivalente en angular debería funcionar igual.

Como verás no es necesario crear un timePicker y mucho menos añadir un eventListener cada que se hace click.

Se declara que tienes un timePicker y cada que den click en la caja lo muestras; esto ayuda incluso a conservar los valores previos mejorando la usabilidad de tu página

var app = angular.module('app', []);

const timepicker = new TimePicker('timePicker', {
    lang: 'en',
    theme: 'dark'
  });

app.controller('ctrl', function($scope) {  

  $scope.changevalue = () => {
    $scope.configurar = true;
    timepicker.show();
  }

  $scope.ocultar = () => {
    $scope.configurar = false;
  }



  timepicker.on('change', function(evt) {
    var value = (evt.hour || '00') + ':' + (evt.minute || '00');
    document.querySelector("#timePicker").value = value;
  }); // fin on change



})
*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

._jw-tpk-container {
  position: absolute;
  width: 250px;
  height: 140px;
  padding: 0;
  background: #fff;
  font-family: inherit;
  font-weight: 400;
  overflow: hidden;
  border-radius: 3px;
  box-sizing: border-box;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1rem;
  font-size: 1rem
}

._jw-tpk-container:after {
  content: " ";
  display: block;
  clear: both
}

._jw-tpk-container *,
._jw-tpk-container :after,
._jw-tpk-container :before {
  box-sizing: border-box
}

._jw-tpk-container *,
._jw-tpk-container .active,
._jw-tpk-container :focus,
._jw-tpk-container :hover {
  text-decoration: none;
  outline: none
}

._jw-tpk-container._jw-tpk-dragging {
  opacity: .85!important
}

._jw-tpk-container._jw-tpk-dragging ._jw-tpk-header {
  cursor: -webkit-grabbing;
  cursor: grabbing
}

._jw-tpk-container ol {
  text-align: center;
  list-style-type: none
}

._jw-tpk-container ol>li {
  display: inline-block
}

._jw-tpk-container ol>li>a {
  display: inline-block;
  padding: 3px 0;
  width: 25px;
  color: inherit;
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: 1.2rem
}

._jw-tpk-container ol>li>a:not(._jw-tpk-selected):hover {
  cursor: pointer;
  border: 1px solid #ccc;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  background: #f5f5f5;
  background: -webkit-linear-gradient(#e6e6e6, #f5f5f5);
  background: linear-gradient(#e6e6e6, #f5f5f5);
  box-shadow: 0 2px 3px hsla(0, 0%, 86%, .8)
}

._jw-tpk-header {
  position: relative;
  font-weight: 600;
  text-align: center;
  cursor: -webkit-grab;
  cursor: grab;
  line-height: 1.875rem
}

._jw-tpk-header:after,
._jw-tpk-header:before {
  content: "";
  display: table
}

._jw-tpk-header:after {
  clear: both
}

._jw-tpk-body {
  padding: 2px 0
}

._jw-tpk-body:after,
._jw-tpk-body:before {
  content: "";
  display: table
}

._jw-tpk-body:after {
  clear: both
}

._jw-tpk-hour {
  width: 64.49275%;
  float: left;
  margin-right: 1.44928%
}

._jw-tpk-minute {
  width: 34.05797%;
  float: right;
  margin-right: 0
}

._jw-tpk-dark {
  color: #212121;
  box-shadow: inset 0 0 0 1px #212121
}

._jw-tpk-dark ._jw-tpk-header,
._jw-tpk-dark ol>li>a._jw-tpk-selected {
  color: #f5f5f5;
  background: -webkit-linear-gradient(#212121, #545454);
  background: linear-gradient(#212121, #545454)
}

._jw-tpk-blue-grey {
  color: #263238;
  box-shadow: inset 0 0 0 1px #263238
}

._jw-tpk-blue-grey ._jw-tpk-header,
._jw-tpk-blue-grey ol>li>a._jw-tpk-selected {
  color: #cfd8dc;
  background: -webkit-linear-gradient(#263238, #4f6875);
  background: linear-gradient(#263238, #4f6875)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>


<div ng-app="app">
  <div ng-controller="ctrl">

    <button name="button" ng-click="ocultar()">Ocultar</button>
    <button name="button" ng-click="changevalue()">Configurar hora</button>
    <input type="text" class="form-control" id="timePicker" data-ng-if="configurar" ng-model="hora" autocomplete="off">
  </div>
</div>

2
  • Como dije lo cambié con un poco de JS puro, pero igual debería funcionar si tú conoces su equivalente con las directivas de Angular. Espero te sea útil el 27 abr. 2021 a las 3:02
  • Gracias, lo resolvi con ng-show en lugar de ng-if justamente para no perder el componente con el id del timepicker
    – 404
    el 27 abr. 2021 a las 19:29

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.