logo
down
shadow

jquery datepicker changing unavailable dates in one instance


jquery datepicker changing unavailable dates in one instance

Content Index :

jquery datepicker changing unavailable dates in one instance
Tag : jquery , By : Sumedh
Date : November 28 2020, 01:01 AM


Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

datePicker need to click twice to show the unavailable dates


Tag : php , By : Gerhard Miller
Date : March 29 2020, 07:55 AM
I hope this helps you . Add async: false into your ajax call so the app will wait for the response before continuing, like so
$('#datepicker').focus(function(){
    //alert($('#name').html());
     $.ajax({                                      
    url: 'getDates.php',                  
    data: "artist_id="+$('#name').html(),                       
    dataType: 'json', 
    async: false,            
    success: function(data)          
    {
               unavailableDates = data;
    } 
    });
"basically when user selects an option (here they want to book artists so \
when user selects an artist), the unavailable dates of datepicker are 
updated   automatically." 
On Artist Changed
    -Disable date picker, possibly add a small note next to it / under it / 
       over it that it is loading
    -Start ajax call with async true
    -In ajax success function, re-enable the picker and remove the message.

jQuery Datepicker Beforeshowday - Ajax return array of unavailable dates


Tag : php , By : Kenny
Date : March 29 2020, 07:55 AM
like below fixes the issue This is a bit hacky but it works. I had to create a button to call the datepicker from. Any code I tried trying the .click event on the same element seems to not update in time. .deferred , etc. simply didn't fire the datepicker. I was able to get an Ajax then initialize datepicker working inserting the entire code in the HTML onclick"" in the element, but I couldn't reproduce this with .click.
Any way, my method:
<td><input type="text" id="MyDate" name="MyDate" readonly='true' value="click here" /></td><td><input type="button" id="button" name="button" value="Select date"></td></td>
AjaxGet = function () {
    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 );
        }
    });
};
function mySuccessCallback(dates) {
    array = dates
    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);
            }
        });
        jQuery('#MyDate').datepicker('destroy');
    });
    jQuery('#MyDate').datepicker('show');
}
jQuery('#button').click(function() {
    AjaxGet();
});

Jquery Datepicker - prevent select in range unavailable dates


Tag : javascript , By : suresh
Date : March 29 2020, 07:55 AM
should help you out Here you go...
I have created a function which convert string to Date
function compareDate(str1, sep){
var dt1   = parseInt(str1.split(sep)[0], 10);
var mon1  = parseInt(str1.split(sep)[1], 10);
var yr1   = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
function setMaxDate()
{
    var date = $("#from").val();
    for(var i=0; i<unavailableDates.length; i++)
    {
    if(compareDate(date, "/")<compareDate(unavailableDates[i], "-")) 
        return compareDate(unavailableDates[i], "-");
    }
    return null;
}
$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
            $( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
        }
    });

    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        beforeShowDay: unavailable,
        numberOfMonths: 1,
        dateFormat: 'dd/mm/yy',
        maxDate: setMaxDate(),    // Added This
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

Make unavailable/undesirable dates disabled in jquery ui datepicker


Tag : javascript , By : Sonal
Date : March 29 2020, 07:55 AM
To fix the issue you can do You've reversed the condition, you want to return true, as in the days are selectable if they aren't in the array, and false if they are not selectable, i.e. they are in the array
var unavailableDates = ["9-8-2017", "14-8-2017", "15-8-2017", "16-8-2017", "17-8-2017", "18-8-2017"];

function available(date) {
  var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, "", "Available"];
  } else {
    return [false, "", "unAvailable"];
  }
}

$('#date').datepicker({
  beforeShowDay: available
});
<input type="text" name="date" id="date" readonly="readonly" size="12" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

Show md-tooltip in md-datepicker on unavailable dates


Tag : javascript , By : Mistere
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Adding link with existing href
  • jquery cycle plugin divs always stacked problem
  • jquery toggle and fade in one function?
  • JQuery UI Tabs caching
  • Drag and Drop into another div and move in the div only using jquery
  • Links in rounded boxes? In ALL browsers (yep included IE8)
  • How to change the content of the Span using jQuery?
  • jQuery; combine user click and :checked
  • jQuery - Finding the element index relative to its container
  • jQuery .each() function. Resetting the index?
  • jQuery storing settings
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • How to bind jquery event to dynamically added multiple DOM elements?
  • How to get td values and store in array using Jquery?
  • How to add handler to dinamically created tr in JQuery?
  • How to Covert Html to PDF in Jquery?
  • Jquery before() and after() used to create a <div> container not inserting closing tags in after()
  • I want to delete previously added class
  • Open html page in same window after clicking on navlink
  • Datatable is not working when I populate table using smarty
  • How to change image based on the offset top of the content div
  • Find the index of table column with specific id
  • How to return value of $(window).resize()
  • How to optimize adding numerous elements dynamically into web page
  • Content slide down on top of page?
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • HTML tags remove from textarea using jQuery
  • ShareThis not display properly when initially hidden
  • jquery - Bind datepicker event
  • How can I cause an element to move on mouse scroll using transform matrix?
  • How to add Custom summaries for autogenerated colums?
  • How to update table row with data from an array using jQuery
  • Cannot get the element in jQuery
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com