2

Estoy tratando de crear una aplicación SPA en JavaScript siguiendo el modelo incluido en el siguiente link el cual contiene una función de route. El problema esta en que quiero que en una de las paginas que se carge se incluya el plugin de bootstrap Datetimepicker, el cual se configura con una función anónima.

$(document).ready(function(){
  var date_input=$('input[name="date"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
  useCurrent: false,
  format: 'dd/mm/yyyy',
  container: container,
  todayHighlight: true,
  autoclose: true,
  startDate: "today",
  language: 'es'
  }).on('closeUp',function(){
    var marca = true;
    if(marca == true){
       alert($(this).val());

    }
  })
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.es.min.js"></script> 



<div class="input-group oculto" id="divDate">
  <div class="input-group-addon">
    <i class="fa fa-calendar"></i>
  </div>
  <input class="form-control" id="date" name="date" placeholder="DD/MM/YYYY" type="text" readonly="readonly" />
</div>

Pero esta función no funciona cuando se carga la pagina . La pregunta es, ¿como puedo ejecutar esta función o cualquier otra que se ejecuta como una función anónima? Es algo que después de mucho intentar aun no he conseguido hacerlo funcionar.

1 respuesta 1

0

Si entendí bien la pregunta, lo que ocupabas era llamar la función desde cualquier parte, entonces lo que se puede hacer es crear dicha función, y no solo ejecutarla cuando se carga la pagina(document.ready) cree la función llamar() y dicha funcion la puedes llamar desde donde la ocupes. Yo por ejemplo la llamo cuando hago click en el boton.

function llamar() {
  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    useCurrent: false,
    format: 'dd/mm/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: "today",
    language: 'es'
  }).on('closeUp', function() {
    var marca = true;
    if (marca == true) {
      alert($(this).val());

    }
  })
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.es.min.js"></script>



<div class="input-group oculto" id="divDate">
  <div class="input-group-addon">
    <i class="fa fa-calendar"></i>
  </div>
  <input class="form-control" id="date" name="date" placeholder="DD/MM/YYYY" type="text" readonly="readonly" />
        <button onclick="llamar()" type="button" id="reporte" class="btn btn-primary" >Click para activar datetimepicker</button>
</div>

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.