highlight dates jquery

Door N K op 16-11-2013 22:28

1.883 views

Ik wil graag bepaalde datums highlighten in de datepicker van jquery.
Ik heb onderstaand script gevonden maar het lijkt niet te werken onder jquery 2.0.2.
Weet iemand waarom?

http://jsfiddle.net/JJDmc/

Toevoeging op 16/11/2013 23:16:46:

Nou deze werkt wel..
http://jsfiddle.net/Z76Z6/

N K

18-11-2013 12:21

Ik krijg het met mijn basis javascript kennis niet voor elkaar om na een POST visueel in de kalender de data te highlighten die ik had geselecteerd. De input velden krijgen wel de juiste waarden.
Kan iemand me de juiste richting op sturen?


<html>
  <head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="lib/jquery/development-bundle/themes/base/jquery.ui.all.css" />
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-nl.js"></script>
<style>
 #highlight, .highlight {
    background-color: red;
}

</style>
  </head>
  <body>
     <form method="POST">
      <label>
        <b>
          Van:
        </b>
      </label>
      <input type="text" name="from" id="input1" size="10" value="
<?php if (isset ($_POST['from'])){ echo  $_POST['from'];}?>
">
   <label>
     <b>
       Tot:
     </b>
   </label>
   <input type="text" name="till" id="input2" size="10" value="
<?php if (isset ($_POST['till'])){ echo  $_POST['till'];}?>
">
     <input type="submit" value="Submit">
      <div id="range"></div>
     </form>
  <script>
    $("#range").datepicker({
      minDate: 0,
      beforeShowDay: function(date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
      }
      ,
      onSelect: function(dateText, inst) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
        
        
        if (!date1 || date2) {
          $("#input1").val(dateText);
          $("#input2").val("");
          $(this).datepicker();
        }
        else if( selectedDate < date1 ) {
          $("#input2").val( $("#input1").val() );
          $("#input1").val( dateText );
          $(this).datepicker();
        }
        else {
          $("#input2").val(dateText);
          $(this).datepicker();
        }
      }
    }
                          );
  </script>
  </body>
</html>

N K

19-11-2013 19:09

Iemand?

N K

20-11-2013 23:14

opgelost met onderstaande code


$(function() {
    
   $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
});
  $("#range").datepicker({
    beforeShowDay: function(date) {
      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
      return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
    },
    onSelect: function(dateText, inst) {
      var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
      var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
      if (!date1 || date2) {
        $("#input1").val(dateText);
        $("#input2").val("");
        $(this).datepicker("option", "minDate", dateText);
      } else {
        $("#input2").val(dateText);
        $(this).datepicker("option", "minDate", null);
      }
    }
  });
});

Reageren

Inloggen om te reageren