Skip to main content
se eliminaron 13 caracteres en el cuerpo; título editado
Origen Enlace
Dev. Joel
  • 23.9k
  • 3
  • 30
  • 47

Carga de funciones anonimasanónimas en aplicaciones SPA JavascriptJavaScript

Buenas noches. Estoy tratando de crear una aplicacion SPAaplicación SPA en JavacriptJavaScript siguiendo el modelo incluido en el siguiente link:   https://codepen.io/ynonp/project/editor/XVvNYOlink el cual contiene una funcionfunción de routeroute. El problema esta en que quiero que en una de las paginas que se carge se incluya el plugin de bootstrap Datetimepickerbootstrap Datetimepicker, el cual se configura con una funcion anonimafunción anónima.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

<!-- FUNCIONES DATETIMEPICKER -->


<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> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
      $(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());
             
          }
      
         
        })




      })
    </script>

$(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 se 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. Muchas gracias.

Carga de funciones anonimas en aplicaciones SPA Javascript

Buenas noches. Estoy tratando de crear una aplicacion SPA en Javacript siguiendo el modelo incluido en el siguiente link: https://codepen.io/ynonp/project/editor/XVvNYO el cual contiene una funcion 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 funcion anonima.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

<!-- FUNCIONES DATETIMEPICKER -->


<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> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
      $(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());
             
          }
      
         
        })




      })
    </script>

Pero esta función no se 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. Muchas gracias.

Carga de funciones anónimas en aplicaciones SPA JavaScript

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.

Formateo de código
Origen Enlace
Trauma
  • 26.9k
  • 5
  • 42
  • 68
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->$(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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

<!-- FUNCIONES DATETIMEPICKER -->


<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> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
      $(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());
             
          }
      
         
        }) 




      })
    </script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->$(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());}})
  })
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>

<!-- FUNCIONES DATETIMEPICKER -->


<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> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
      $(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());
             
          }
      
         
        }) 




      })
    </script>
Origen Enlace
AntonioMP87
  • 499
  • 3
  • 15
  • 29

Carga de funciones anonimas en aplicaciones SPA Javascript

Buenas noches. Estoy tratando de crear una aplicacion SPA en Javacript siguiendo el modelo incluido en el siguiente link: https://codepen.io/ynonp/project/editor/XVvNYO el cual contiene una funcion 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 funcion anonima.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
--> $(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()); } })
  })
</script>

Pero esta función no se 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. Muchas gracias.