Initialize Datepicker when called or similiar?

Initialize Datepicker when called or similiar?

Hi, 

i am trying to use datepicker as part of a booking engine. I currently have pass a array of dates that are unavailable to beforeshowday and this stops people from selecting these dates. But obviously because the datepicker is initializing at document ready (am i right all the settings are executed here?) the array cant be changed without refreshing the page.

I have 2 functions at the moment to do this but need a method to either:

1. initialize the datepicker when its text box is clicked and then display 

2. refresh the settings when called 

or a even better method/ hack yet to be discovered by me!

current functions

ajax call for array:

  1. AjaxGet = function () {
  2.      console.log ('started');
  3.     jQuery.ajax({
  4.         type: "POST",
  5.         url: "/wp-admin/admin-ajax.php",
  6.         data: {
  7.             action: 'unavail_dates',
  8.             unavaildates: '2'
  9.         },
  10.         success: function (output) {
  11. dates = jQuery.parseJSON('["'+output+'"]');
  12. mySuccessCallback( dates );
  13. console.log ( dates );
  14. //var array = jQuery.Deferred();
  15.         }
  16.     });
  17. };
  18. function mySuccessCallback( dates ) {
  19. array = dates
  20. //array.resolve( dates );
  21. console.log ('eod');
  22. console.log ( array );
  23. }


  24. jQuery('#button').click(function() {
  25. AjaxGet();
  26. });
  27. //testing call.
  28. jQuery('#button2').click(function() {
  29. alert(array + 'and' + dates )
  30. });

Ignore the resolve comment above!

datepicker function to block out var array dates 
  1. jQuery(document).ready(function() {
  2. jQuery('#MyDate').datepicker({
  3. minDate: '+2',
  4. maxDate: new Date(2014, 1,28),
  5. dateFormat: 'dd-mm-yy',
  6. beforeShowDay: function(date){
  7. var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
  8. return [ array.indexOf(string) == -1 ];
  9. },
  10. onSelect: function(dateText) {
  11.     jQuery(this).change();
  12. }
  13. }).change(function() {
  14. if (document.getElementById('date_error_row').style.visibility == 'visible') {
  15. document.getElementById('date_error_row').style.visibility = 'hidden';
  16. }
  17. var postid = '<?php echo esc_js($posted_id); ?>';
  18. var pdate = jQuery(this).val(); //select updated value
  19.       jQuery.ajax({
  20. type:"POST",
  21. url: "/wp-admin/admin-ajax.php",
  22. data: {action: 'tempsave', postid: postid , postdate: pdate , status: 'waiting'},
  23. success:function(data){
  24. jQuery("#feedback").html(data);
  25. }
  26. });

  27.     });
  28. });

basically the ajax in the success saves the date after selection. 

Thanks.