Validate a Jquery calendar with a number of days in Select

Question

Validate a Jquery calendar with a number of days in Select

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

Good morning: I have a variable that contains an example number $ por_disfrutar = 4; And then with a select I do a for cycle to go through those 4 numbers and I throw the following:

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

And later what I need is that according to the number that I choose in the Select (example I select the number 2) it only allows me to pick up the dates in my Jquery calendar according to the number that I choose in the Select and the rest disables me if I try to pick one more

Please help me with this code because I am a vile newbie in the use of Jquery and I am learning. It is to validate to assign the MaxPicker the value of the number selected in the Select.

Select the days

$ (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>

Thank you.

jquery php ajax

asked by Juan Pablo Bustamante Luna 09.12.2016 в 18:11

source

2 answers

0

Ideally, the value of maxPicks is a date for example today plus the days that I select in the selector.

var hoy = new Date();
var days = parseInt(selected.val());
var fecha_maxima = hoy.setDate(hoy.getDate() + days);
maxPicks = fecha_maxima;

answered by 09.12.2016 в 18:18

Redirect a URL from JavaScript to a controller in MVC with Angular consult 360,000 codes quickly java

score 3 · Accepted Answer

You need to add the function when the combo changes its value:

$( '#dias' ).change

Check the example:

$(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>

Assigning the property minDate you can limit the datepicker to have a start date, in the example you rest a day to the current date:

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

Now add the example function ... you can try it if you like.