0

Buenos dias: Tengo una variable que contiene un numero ejemplo $por_disfrutar=4; Y despues con un select hago un ciclo for para que recorra esos 4 numeros y me arroje lo siguiente:

<?php
for ($i=1; $i <=$por_disfrutar ; $i++) {
echo "<option value=".$i.">".$i."</option>";
$n=$n+1;}
 ?>

Select

Y posterior lo que necesito es que de acuerdo al numero que yo elija en el Select (ejemplo selecciono el numero 2) solo me permita pickear las fechas en mi calendario Jquery de acuerdo al numero que yo elija en el Select y los demás me lo dehabilite si intento pickear uno mas

Calendario

Por favor ayudarme con este codigo porque soy un vil novato en el uso de Jquery y estoy aprendiendo. Es para validar para asignar al MaxPicker el valor del numero seleccionado en el Select.

Selecciona los dias

$( document ).ready(function() { console.log( "ready!" ); var selected = $('#dias option:selected'); var value=selected.val(); $('#id3').multiDatesPicker({ dateFormat: "dd-mm-yy", maxPicks: value }); });

$( document ).ready(function() {
  console.log( "ready!" );
  var selected = $('#dias option:selected');
  var value=selected.val();
  $('#id3').multiDatesPicker({
    dateFormat: "dd-mm-yy", 
    maxPicks: value
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php 
$por_disfrutar=4;
?>

<div class="form-group row">
  <label for="dias_solicitar"class="col-xs-12 col-sm-6 col-md-2 col-form-label">Dias a solicitar </label>
  <div class="col-md-2">
    <select id="dias" name="dias">
      <?php
//Tu variable.
for ($i=1; $i <=$por_disfrutar; $i++) {
echo "<option value=".$i.">".$i."</option>";
$n=$n+1;
}
?>

    </select>
  </div>
  <label for="dias_solicitar"class="col-xs-12 col-sm-6 col-md-2 col-form-label">Selecciona los dias </label>
  <div class="col-md-6"><input id="id3" type="text"/></div>
  <link rel="stylesheet" type="text/css" href="pruebas/css/jquery-ui.css">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
  <link rel="stylesheet" type="text/css" href="pruebas/css/jquery-ui.theme.css">
  <script>
    $( document ).ready(function() {
      console.log( "ready!" );
      var selected = $('#dias option:selected');
      var value=selected.val();
      $('#id3').multiDatesPicker({
        dateFormat: "dd-mm-yy", 
        maxPicks: value
      });
    });
  </script>
</div>

Gracias.

2 respuestas 2

3

Te falta agregar la función cuando el combo cambie de valor:

$( '#dias' ).change

Checa el ejemplo:

$(document).ready(function() {
  console.log("ready!");

  var selected = $('#dias option:selected');
  var value = selected.val();

  $('#id3').multiDatesPicker({
    dateFormat: "dd-mm-yy",
    maxPicks: value,
    minDate: -1 //Con esta propieda asignas un dia minimo
  });

  $( '#dias' ).change(function() {
    var dias = $( this ).val();
    console.log("Se cambiara a: ", dias);
   //Inicializo
    $('#id3').multiDatesPicker('resetDates');
    $('#id3').multiDatesPicker({
      dateFormat: "dd-mm-yy",
      maxPicks: dias,
      minDate: -1 //Con esta propieda asignas un dia minimo
    });
  });

});
@import url("pepper-ginder-custom.css");

/* just some styling */

body {
  font: 0.7em/1.5em"Trebuchet MS", Verdana, sans-serif;
  background: white url('images/ui-bg_fine-grain_65_654b24_60x60.png') repeat;
}
h1 {
  text-align: center;
  margin: 1.5em;
}
h2 {
  border-top: 1px dotted #AAA;
  padding-top: 1em;
  margin-top: 1em;
}
h4 {
  margin-bottom: 0;
}
p {
  margin-top: .3em;
}
code,
pre.code {
  font: 11px/13px monospace;
  background-color: #FFC;
  padding: 2px;
  border: 1px dotted grey;
}
.clear {
  clear: both;
}
a {
  text-decoration: none;
  color: #800;
}
a:hover {
  text-decoration: underline;
}
#share {
  position: absolute;
  right: 20px;
  top: 20px;
  text-align: right;
}
#page {
  position: relative;
  margin: 1em auto;
  padding: 2em;
  width: 960px;
  background: white url('images/ui-bg_fine-grain_10_f8f7f6_60x60.png') repeat;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #D9D6C4;
  color: #1F1F1F;
  font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
  font-size: 1.1em;
}
#demos-list {
  padding: 0;
}
#flairs {
  text-align: center;
}
#flairs ul {
  list-style: none;
  padding: 0;
}
#flairs li {
  display: inline;
}
.demo {
  vertical-align: top;
  display: inline-block;
  margin: 1em 1%;
  width: 43.5%;
  background-color: rgba(0, 0, 0, .1);
  padding: 0 2%;
  border-radius: 10px;
}
.demo.full-row {
  width: 95%;
}
.demo ul,
.demo ol {
  list-style-position: inside;
}
.demo .box {
  float: left;
  margin: 0 1em 1em 0;
}
.example {
  color: #006400;
}
.important-note {
  font-weight: bold;
  color: #B22222;
}
.reference-to {
  font-size: large;
  font-weight: bold;
}
.code-box {
  clear: both;
}
.code {
  padding: 5px;
  color: #333;
  background-color: white;
  font: small monospace;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: #F8F7F6 url('images/ui-bg_fine-grain_10_f8f7f6_60x60.png') 50% 50% repeat;
}
/* begin: jQuery UI Datepicker moving pixels fix */

table.ui-datepicker-calendar {
  border-collapse: separate;
}
.ui-datepicker-calendar td {
  border: 1px solid transparent;
}
/* end: jQuery UI Datepicker moving pixels fix */

/* begin: jQuery UI Datepicker emphasis on selected dates */

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
  background: #743620 none;
  color: white;
}
/* end: jQuery UI Datepicker emphasis on selected dates */

/* begin: jQuery UI Datepicker hide datepicker helper */

#ui-datepicker-div {
  display: none;
}
/* end: jQuery UI Datepicker hide datepicker helper */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" type="text/css" href="pruebas/css/jquery-ui.theme.css">
<div class="form-group row">
  <label for="dias_solicitar" class="col-xs-12 col-sm-6 col-md-2 col-form-label">Dias a solicitar</label>
  <div class="col-md-2">
    <select id="dias" name="dias">
      <option value=1>1</option>
      <option value=2>2</option>
      <option value=3>3</option>
      <option value=4>4</option>
      <option value=5>5</option>
    </select>
  </div>
  <label for="dias_solicitar" class="col-xs-12 col-sm-6 col-md-2 col-form-label">Selecciona los dias</label>
  <div class="col-md-6">
    <input id="id3" type="text" />
  </div>



</div>

Asignándole la propiedad minDate puedes limitar el datepicker para que tenga una fecha de inicio, en el ejemplo le resto un día a la fecha actual:

$('#id3').multiDatesPicker({
    dateFormat: "dd-mm-yy",
    maxPicks: value,
    minDate: -1 //Con esta propieda asignas un dia minimo
  });

Ya agregue la función la ejemplo... puedes probarla si gustas.

3
  • 1
    Muchsimas gracias por tu valiosa ayuda. Ya quedo en base a tu gran conocimiento. De nueva cuenta, gracias. Commented el 15 dic. 2016 a las 0:13
  • 1
    Una pregunta mas. ¿como puedo deshabilitar los dias anteriores al dia de hoy? por ejemplo que quede deshabilitado las fechas anteriores a partir del dia de ayer !! Mil gracias!! Commented el 15 dic. 2016 a las 15:21
  • minDate: -1 //Con esta propieda asignas una fecha minima, o fecha de inicio, revisa el ejemplo ya añadí esta funcionalidad al código. Commented el 27 dic. 2016 a las 22:39
0

Lo ideal seria que el valor de maxPicks sea una fecha por ejemplo hoy más los dias que selecciono en el selector.

var hoy = new Date();
var days = parseInt(selected.val());
var fecha_maxima = hoy.setDate(hoy.getDate() + days);
maxPicks = fecha_maxima;
4
  • el detalle es que no pueden elegir el día de de hoy. Deben elegir todo menos hoy y los domingos claro. Commented el 10 dic. 2016 a las 17:04
  • Cual es la fecha mínima de elección?
    – sioesi
    Commented el 10 dic. 2016 a las 17:05
  • Puede elegir una fecha menor a hoy, mayor a hoy pero nunca hoy? No entiendo muy bien ese concepto o lo que quieres lograr
    – sioesi
    Commented el 10 dic. 2016 a las 17:07
  • El objetivo de este calendario es que el usuario solicite días a tomar vacaciones. Pero no puede elegir el día de hoy. Ejemplo hoy no me puedo ir porque estoy laborando. Pero puedo pedir el lunes martes jueves sábado etc. Esto depende de los días que seleccione en el Select Commented el 10 dic. 2016 a las 17:21

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.