Support » Plugin: WooCommerce » WooCommerce Bookings – Available Date Drop Down Instead of Date Picker

  • Resolved rapportdesign

    (@rapportdesign)


    There doesn’t seem to be anywhere to post stuff relating to the Bookings plugin yet.

    I had a WooIdea, which I decided to tackle myself and have found a solution that others may want to take advantage of.

    The idea…
    http://ideas.woothemes.com/forums/72423-general-ideas/suggestions/6102934-woocommerce-bookings-available-date-drop-down-in

    The solutions…

    Replace the code in date-picker.php with the following…

    <?php
    wp_enqueue_script( 'wc-bookings-date-picker' );
    extract( $field );
    ?>
    <fieldset class="wc-bookings-date-picker <?php echo implode( ' ', $class ); ?>">
    	<legend><?php echo $label; ?>: <!--<small><?php //_e( 'Choose...', 'woocommerce-bookings' ); ?></small></legend>
    	<div class="picker" data-availability="<?php //echo esc_attr( json_encode( $availability_rules ) ); ?>" data-default-availability="<?php //echo $default_availability ? 'true' : 'false'; ?>" data-fully-booked-days="<?php //echo esc_attr( json_encode( $fully_booked_days ) ); ?>" data-min_date="<?php //echo ! empty( $min_date_js ) ? $min_date_js : 0; ?>" data-max_date="<?php //echo $max_date_js; ?>"></div>-->
    
    <?php
    $dates = array();
    foreach ($availability_rules as $dateItem) {
        if ($dateItem[0] == 'custom') // assuming you only want things marked as custom.
        {
            $pDate = array();
            foreach ($dateItem[1] as $year=>$dateMore)
            {
                foreach ($dateMore as $month=>$dateMore2)
                {
                    foreach ($dateMore2 as $day=>$ex)
                    {
                        $dates[] = implode('-',array($day, $month, $year));
                    }
                }
            }
        }
    }
    
    $datesSorted = array_reverse($dates);
    $datesSortedLength=count($datesSorted);
    
    ?>
    <select id="availableDates">
    	<?php if ($datesSortedLength == 0) { ?>
    		<option value="">No Dates Available</option>
    	<?php } else { ?>
      	<option value="">Select Date</option>
      <?php } ?>
    	<?php for($x=0;$x<$datesSortedLength;$x++) { ?>
      <option value="<?php echo $datesSorted[$x]; ?>"><?php echo $datesSorted[$x]; ?></option>
      <?php } ?>
    </select>
    
    	<label>
    		<input type="text" value="<?php echo date( 'Y' ); ?>" name="<?php echo $name; ?>_year" placeholder="<?php _e( 'YYYY', 'woocommerce-bookings' ); ?>" size="4" />
    		<span><?php _e( 'Year', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_month" placeholder="<?php _e( 'mm', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Month', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_day" placeholder="<?php _e( 'dd', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Day', 'woocommerce-bookings' ); ?></span>
    	</label>
    </fieldset>

    Add the following to your footer…

    $(document).ready(function(){
    
    			$('#availableDates').on('change', function() {
    				var selectedDate = $(this).val()
    				var selectedDateBreakdown = selectedDate.split("-"); 
    
    				$( "input[name*='wc_bookings_field_start_date_day']" ).val( selectedDateBreakdown[0] );
    				$( "input[name*='wc_bookings_field_start_date_month']" ).val( selectedDateBreakdown[1] );
    				$( "input[name*='wc_bookings_field_start_date_year']" ).val( selectedDateBreakdown[2] );
    			});
    
        });  /* END DOCUMENT READY  */

    https://wordpress.org/plugins/woocommerce/

Viewing 15 replies - 1 through 15 (of 17 total)
  • rapportdesign

    (@rapportdesign)

    I’ve had to make a modification to this, because old dates were still showing.

    Replace the following…

    <option value="<?php echo $datesSorted[$x]; ?>"><?php echo $datesSorted[$x]; ?></option>
      <?php } ?>

    with…

    <?php
    		$todays_date = date("d-m-Y"); 
    
    		$today = strtotime($todays_date);
    		$expiration_date = strtotime($datesSorted[$x]); 
    
    		if ($expiration_date > $today) { ?>
    			<option value="<?php echo $datesSorted[$x]; ?>"><?php echo $datesSorted[$x]; ?></option>
    		<?php
      	}
     	} ?>
    rapportdesign

    (@rapportdesign)

    This caused a problem with the No Dates Available functionality, so ignore the post above and replace all of the code in date-picker.php with the following…

    <?php
    wp_enqueue_script( 'wc-bookings-date-picker' );
    extract( $field );
    ?>
    <fieldset class="wc-bookings-date-picker <?php echo implode( ' ', $class ); ?>">
    	<legend><?php echo $label; ?>: <!--<small><?php //_e( 'Choose...', 'woocommerce-bookings' ); ?></small></legend>
    	<div class="picker" data-availability="<?php //echo esc_attr( json_encode( $availability_rules ) ); ?>" data-default-availability="<?php //echo $default_availability ? 'true' : 'false'; ?>" data-fully-booked-days="<?php //echo esc_attr( json_encode( $fully_booked_days ) ); ?>" data-min_date="<?php //echo ! empty( $min_date_js ) ? $min_date_js : 0; ?>" data-max_date="<?php //echo $max_date_js; ?>"></div>-->
    
    <?php
    $dates = array();
    foreach ($availability_rules as $dateItem) {
        if ($dateItem[0] == 'custom') // assuming you only want things marked as custom.
        {
            $pDate = array();
            foreach ($dateItem[1] as $year=>$dateMore)
            {
                foreach ($dateMore as $month=>$dateMore2)
                {
                    foreach ($dateMore2 as $day=>$ex)
                    {
                        $dates[] = implode('-',array($day, $month, $year));
                    }
                }
            }
        }
    }
    
    $datesSorted = array_reverse($dates);
    $datesSortedLength=count($datesSorted);
    $currentDates = 0;
    
    ?>
    <select id="availableDates">
    
    	<?php for($x=0;$x<$datesSortedLength;$x++) { ?>  
    
        <?php $todays_date = date("d-m-Y"); 
    
        $today = strtotime($todays_date);
        $expiration_date = strtotime($datesSorted[$x]); 
    
        if ($expiration_date > $today) {
          $currentDates = $currentDates + 1;
        }
       } ?>
    
    	<?php if ($currentDates == 0) { ?>
    		<option value="">No Dates Available</option>
    	<?php } else { ?>
      	<option value="">Select Date</option>
      <?php } ?>
    
    	<?php for($x=0;$x<$datesSortedLength;$x++) { ?>  
    
    		<?php $todays_date = date("d-m-Y"); 	
    
    		$today = strtotime($todays_date);
    		$expiration_date = strtotime($datesSorted[$x]); 	
    
    		if ($expiration_date > $today) { ?>
    			<option value="<?php echo $datesSorted[$x]; ?>"><?php echo $datesSorted[$x]; ?></option>
    		<?php
      	}
    
    	} ?>
    
    </select>
    
    	<label>
    		<input type="text" value="<?php echo date( 'Y' ); ?>" name="<?php echo $name; ?>_year" placeholder="<?php _e( 'YYYY', 'woocommerce-bookings' ); ?>" size="4" />
    		<span><?php _e( 'Year', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_month" placeholder="<?php _e( 'mm', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Month', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_day" placeholder="<?php _e( 'dd', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Day', 'woocommerce-bookings' ); ?></span>
    	</label>
    </fieldset>

    Hi there, this is exactly what I’m looking for, but when I use your code I only get “no dates available”.

    For my bookable product i have it set to fixed blocks of 1 day, then under Availability i have two rows of available dates (20th August 2014 and 29th September 2014). but still I just see “no dates available”.

    Can you help?

    Thanks in advance!

    The code below seemed to fix it, but I’m not sure why. basically i had to run ANOTHER foreach loop inside your first one, so instead of

    foreach ($availability_rules as $dateItem) {
    
    }

    I needed

    foreach ($availability_rules as $dateItemArray) {
        foreach ($dateItemArray as $dateItem) {
        }
    }

    It seems like $dateItem[0] was returning an array rather than “custom”, which was the first value of the array inside $dateItem[0].

    any ideas if this is a stable solution or why it works differently for me than you?

    Thanks again!

    I did forget to mention that I was using fixed blocks of 1 day and was entering the same date for start and finish dates.

    The solution seems stable for me and I’m afraid I don’t currently have enough time spare to look into your tweak to see how it would effect my results.

    Nice to know that you appear to have it working for yourself also.

    Hopefully the developer of the plugin will introduce this feature in a future release.

    So what is the content of the total date-picker.php file now?

    Hi Niels,

    I’m using a totally different method now to custom load dates, so not sure I can help, sorry.

    Cheers

    I’m still using the last bit of code that I posted. Ive been placing the start date in both the start and end field with it based on fixed blocks of 1 day.

    Hi rapportdesign,

    I’ve just used your code but im getting no dates available as well. If you could have a look at my screenshots and maybe suggest what I may be doing wrong I’d be forever grateful!

    I added the latest code you wrote to my date-picker.php and have it set up as fixed block 1 day with Start and End the same date but no luck.

    http://s29.postimg.org/taz27ybvb/Screen_Shot_2014_12_29_at_9_14_00_PM.png

    http://s1.postimg.org/o3ci6g45r/Screen_Shot_2014_12_29_at_9_14_44_PM.png

    Thank you!

    After updating the Bookings plugin, the code had to be totally modified to the below and no longer requires the start and end date to be the same…

    <?php
    wp_enqueue_script( 'wc-bookings-date-picker' );
    extract( $field );
    
    $year = array();
    $month = array();
    $days = array();
    $s;
    $day1;
    $i=0;
    $j=0;
    
    foreach ($availability_rules as $value) {
    
    	foreach ( $value as  $value2) {
    
    		foreach ( $value2 as  $value3) {
    
    			reset($value3);
    			while (list($key, $val) = each($value3)) {
    
    				$year[$i] = $key; //add year to array - $i is the count of how many course
    
    				reset($val);
    				while (list($key2, $val2) = each($val)) {
    					if($key2 < 10){
    						$month[$i] = '0'.$key2; //add the month value to another array - with leading 0
    					}else{
    
    						$month[$i] = $key2; //add the month value to another array
    					}
    
    					$s = "";
    					$j = 0;
    					reset($val2);
    					while (list($key3, $val3) = each($val2)) {
    
    						if($j==0||$j==1){
    							$s = $s . $key3 .',';
    						}else{
    							$s = $s . $key3;
    						}
    						if($j==0){
    							$day1[$i] = $key3; //add the day value to another array
    						}
    
    						$j++;
    
    					}
    					$days[$i] = $s;
    				}
    
    				$i++; //increments each time we loop through a year
    
    			}
         	}
    	}
    }
    $arrlength = 0;
    $arrlength = count($year); //this is our total amount of courses
    
    ?>
    <fieldset class="wc-bookings-date-picker <?php echo implode( ' ', $class ); ?>">
    	<legend><?php echo $label; ?>: </small></legend>
    	<select id="availableDates">
    		<option value="">Select Date</option>
    		<?php
    		if($arrlength==0){
    			echo "<option value=''>There are no dates</option>";
    		}else{
    			$todays_date = date("d-m-Y"); 	
    
    			$today = strtotime($todays_date);
    			for($x = $arrlength -1; $x >= 0; $x--){ //loop through total amount
    
    				$expiration_date =strtotime($day1[$x].'-'.$month[$x].'-'.$year[$x]); 
    
    				if ($expiration_date > $today) {
    			    	echo "<option value='$day1[$x]-$month[$x]-$year[$x]'>$day1[$x]/$month[$x]/$year[$x] </option>"; //pull in the index for each date array
    				}
    			}
    		}
    
    		?>
    	</select>
    	<label>
    		<input type="text" value="<?php echo date( 'Y' ); ?>" name="<?php echo $name; ?>_year" placeholder="<?php _e( 'YYYY', 'woocommerce-bookings' ); ?>" size="4" />
    		<span><?php _e( 'Year', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_month" placeholder="<?php _e( 'mm', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Month', 'woocommerce-bookings' ); ?></span>
    	</label> <!--/--> <label>
    		<input type="text" name="<?php echo $name; ?>_day" placeholder="<?php _e( 'dd', 'woocommerce-bookings' ); ?>" size="2" />
    		<span><?php _e( 'Day', 'woocommerce-bookings' ); ?></span>
    	</label>
    </fieldset>

    You are awesome, thanks for the update.

    The dropdown now works but now an error appears above. See the following screenshots:

    http://s22.postimg.org/f9q1yc60h/warning1.jpg
    http://s28.postimg.org/5al5q91ot/details.jpg

    Any idea how to get rid of this warning?

    I have also just realized that even though the dates appear in the dropdown and one is selected, you cannot click ‘Book” as it returns the error “Date is Required – Please Select a Date”.

    http://s28.postimg.org/y0h8edkgd/warning2.jpg

    To be honest, I didn’t write the second solution, so I’m going to struggle to help.

    I managed to achieve the first solution after a lot of help from Stack Overflow and days worth of work.

    I shared my work in hope that others would benefit from it and encourage the developer to implement this functionality.

    I posted an idea relating to this back in June and have so far only had 18 votes… http://ideas.woothemes.com/forums/72423-general-ideas/suggestions/6102934-woocommerce-bookings-available-date-drop-down-in

    I held off updating the Bookings plugin for as long as possible, but there have been so many fixes in the last 6 months, I had to update to Version 1.5.1 just before Christmas and it broke my code.

    I spent half a day looking into it again and got nowhere, so I decided it would be better use of my time to hire a freelancer who has more experience in this area, hence where I got the solution recently posted.

    I believe the reset variable is used to break the loop for dates between the start and end date, so maybe if you’re using the same date for start and end, that could be why you’re having this problem and I just haven’t discovered it yet. This might also solve you’re Booking issue, as everything works for me on Version 1.5.1

    Sorry I can’t be of more help, but I’m no longer in touch with the developer I hired without paying more money.

    Hopefully the developer will implement this soon, as it’s an ongoing nightmare for anyone that needs it and doesn’t know what they’re doing.

    Hi rapportdesign

    Wou;d you mind sharing the details of the freelancer you used.

    KR

    Alan

    Hi there,

    I have contacted the developer and told them you are interested in their services, but I’m not entirely sure if they are able to help due to other work commitments.

    They have your details and that’s as much as I can do I’m afraid.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘WooCommerce Bookings – Available Date Drop Down Instead of Date Picker’ is closed to new replies.