Databases
StackOverflow2013
Postsdbo
POJquery datepicker beforeShowDay browser inconsistency and update issues
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery datepicker beforeShowDay browser inconsistency and update issues
    primarykey
    data
    text
    <p>I'm having a bit of an issue with jQuery UI Datepicker where I am trying to highlight free days in a given month as determined by an ajax call. </p> <p>The problem is two-fold - </p> <ol> <li><p>The beforeShowDay only appears to be executing correctly in Chrome, not FF or IE, the free-day class is simply not being added in those browsers.</p></li> <li><p>Even in Chrome, when scrolling to the previous month, the free day class is not added until returning to that month, in other words the free days are not highlighted on the first view of that month. This does not appear to be an issue moving forward a month though. </p></li> </ol> <p>javascript</p> <pre><code>// declare freeDays global var freeDays = []; // perform initial json request for free days fetchFreeDays(); $(document).ready(function() { // fairly standard configuration, importantly containing beforeShowDay and onChangeMonthYear custom methods $("#datepicker").datepicker({ changeMonth: true, changeYear: true, showOtherMonths: true, selectOtherMonths: true, dateFormat: 'DD, d MM, yy', altField: '#date_due', altFormat: 'yy-mm-dd', beforeShowDay: highlightDays, onChangeMonthYear: fetchFreeDays, firstDay: 1 // rows starts on Monday }); }); // query for free days in datepicker function fetchFreeDays(year, month) { var start_date = ''; // if a month and year were supplied, build a start_date in yyyy-mm-dd format if (year != undefined &amp;&amp; month != undefined) { start_date = year +'-'; start_date += month +'-'; start_date += '01'; } $.getJSON("ajax.todos.php?start_date="+ start_date, function(data){ $.each(data, function(index, value) { freeDays.push(value.freeDate); // add this date to the freeDays array }); }); } // runs for every day displayed in datepicker, adds class and tooltip if matched to days in freeDays array function highlightDays(date) { for (var i = 0; i &lt; freeDays.length; i++) { if (new Date(freeDays[i]).toString() == date.toString()) { return [true, 'free-day', 'no to-do items due']; // [0] = true | false if this day is selectable, [1] = class to add, [2] = tooltip to display } } return [true, '']; } </code></pre> <p>php</p> <pre><code>// ajax.todos.php $i = 0; // counter prevents infinite loop $cutoff = '61'; // limit on timespan (in days) $result = array(); // if date is provided, use it, otherwise default to today $start_date = (!empty($start_date)) ? mysql_real_escape_string($start_date) : date('Y-m-d'); $check_date = $start_date; $end_date = date('Y-m-d', strtotime("$start_date +$cutoff days")); // never retrieve more than 2 months while ($check_date != $end_date) { // check if any incomplete todos exist on this date if (mysql_result(mysql_query("SELECT COUNT(id) FROM " . DB_TODOS . " WHERE date_due = '$check_date'"), 0) == 0) { $result[] = array('freeDate' =&gt; $check_date); } // +1 day to the check date $check_date = date('Y-m-d', strtotime("$check_date +1 day")); // break from loop if its looking like an infinite loop $i++; if ($i &gt; $cutoff) break; } header('Content-type: application/json'); echo json_encode($result); </code></pre> <p>css</p> <pre><code>/* override free days background in jquery ui datepicker */ .free-day { background: #2e9500; } .free-day a { opacity: 0.7; } </code></pre> <p>I wrote a tutorial about this a couple of months ago which is might have some extra info, which is <a href="http://stevethomas.com.au/jquery/jquery-datepicker-ajax-request-to-highlight-days-from-mysql.html" rel="nofollow">here</a>. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSteve Thomas
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery datepicker beforeShowDay browser inconsistency and update issues
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJquery datepicker beforeShowDay browser inconsistency and update issues
      1. USluca
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload