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:
- AjaxGet = function () {
- console.log ('started');
- jQuery.ajax({
- type: "POST",
- url: "/wp-admin/admin-ajax.php",
- data: {
- action: 'unavail_dates',
- unavaildates: '2'
- },
- success: function (output) {
- dates = jQuery.parseJSON('["'+output+'"]');
- mySuccessCallback( dates );
- console.log ( dates );
- //var array = jQuery.Deferred();
-
- }
- });
- };
-
- function mySuccessCallback( dates ) {
- array = dates
- //array.resolve( dates );
- console.log ('eod');
- console.log ( array );
- }
-
- jQuery('#button').click(function() {
- AjaxGet();
- });
- //testing call.
- jQuery('#button2').click(function() {
- alert(array + 'and' + dates )
- });
Ignore the resolve comment above!
datepicker function to block out var array dates
- jQuery(document).ready(function() {
- jQuery('#MyDate').datepicker({
- minDate: '+2',
- maxDate: new Date(2014, 1,28),
- dateFormat: 'dd-mm-yy',
-
- beforeShowDay: function(date){
- var string = jQuery.datepicker.formatDate('yy/mm/dd', date);
- return [ array.indexOf(string) == -1 ];
- },
- onSelect: function(dateText) {
- jQuery(this).change();
- }
- }).change(function() {
-
- if (document.getElementById('date_error_row').style.visibility == 'visible') {
- document.getElementById('date_error_row').style.visibility = 'hidden';
- }
- var postid = '<?php echo esc_js($posted_id); ?>';
- var pdate = jQuery(this).val(); //select updated value
-
- jQuery.ajax({
- type:"POST",
- url: "/wp-admin/admin-ajax.php",
- data: {action: 'tempsave', postid: postid , postdate: pdate , status: 'waiting'},
- success:function(data){
- jQuery("#feedback").html(data);
- }
- });
- });
- });
basically the ajax in the success saves the date after selection.
Thanks.