Can you style an Option in a drop down ??

[vincej]

HI I'm using PHP & Codeigniter to build a system.

 

I have a drop down menu which presents dates.  I only want future dates shown.

 

However if a historical date should creep into the DB a neat and tidy way would be to style the offending date in my drop down box white thus it would appear to be an empty field.

 

The option to be styled white would be subject to s condition that the variable was a time in the past which I hope I would be able to check with a conditional clause.

 

Does anyone know id you can style options with CSS, or should I just go with Javascript ? 

 

Thanks !

[requinix]

It's possible but there are restrictions on what you can do (not to mention browser support).

 

If you only want future dates shown then only show future dates. Is that trickier than it sounds or something?

[vincej]

the challenge is the fact that the options in the drop down are variables whose value is pulled from an array from  MySql. If I have my query filtering only for future dates then one of the drop down options could be left blank. A blank array variable will throw a nasty error "Undefined Index". What is more the dates are coming in as date stamps. If strftime() sees a blank index it automatically puts in dec 31 1969 - not great.

 

So by not filtering the dates, if a date should be historical, then I could perhaps style it white, thus avoiding the errors and the time stamp thingee.

 

I guess Javascript might be easier.

 

[Andy-H]

If you're selecting the dates from a database just filter them in your query or PHP, it's easy:

 

 

SELECT date FROM datetable WHERE DATEDIFF(date, NOW()) >= 0

 

 

Also look into the jquery UI datepicker, you could replace the select box with this with jquery once the page has loaded, IMO it's a lot slicker than a drop-down

 

 

 

   // getdates.php
   // connect to mysql
   $query  = "SELECT date FROM datetable WHERE DATEDIFF(date, NOW()) >= 0";
   $result = mysql_query($query)or die(mysql_error());
   $dates  = array();
   while ( $row = mysql_fetch_row($result) )
      $dates[] = $row[0];
   echo json_encode($dates);

$(document).ready(function() {
   var selector = 'select'; // select#id, select.class
   $(selector).replaceWith('<input type="text" id="date" >');

   var dates = [];
   $('#date').datepicker({
      dateFormat      : 'dd/mm/yy',
      minDate         : $.datepicker.formatDate('dd/mm/yy', new Date()),
      beforeShowDay   : function (date) {
         if ( typeof dates == 'undefined' )
         {
            $.ajax({
               async   : false,
               url     : 'http://mysite.com/getdates.php',
               dataType: 'json',
               success : function(data) {
                  dates.push(data);
               }
            });
         }
         $.each(dates, function() {
            if ( date === new Date(this) )
               return [true, ''];
         });
         return [false, ''];
      }
   });
});

[vincej]

Wow - thanks !

 

 

I'm not good at javascript, hence I shy away from it, but I'll take your suggestion seriously !