CODEWITHSUNDEEP
javascriptjquery
saroj
saroj

Reputation: 121

How to make date turnoff dynamically in jquery datepicker?

hello i want to turnoff date dynamically in jquery datepicker, but the problem is that how can i pass variable from one function to another. here is the code.

<script>
    $(function() {

        $("#datepicker").datepicker({
            beforeShowDay: function(date) {
                var day = date.getDate();
                if (day == 31) /* i want to pass dynamic value here */ {
                    return [false];
                } else {
                    return [true];
                };
            }
        });

        $(".ui-state-default").on('click', function(e) {
            var value = e.toElement.outerText; /* i want to pass this value to beforeShowDay*/
        })
    });
</script>

check my demo here

Upvotes: 3

Views: 357

Answers (4)

cssyphus
cssyphus

Reputation: 40038

Easy peasy:

jsFiddle Demo

denyDate = 12;  // <-- just that easy

$( "#datepicker" ).datepicker({
    beforeShowDay: function(date){
        var day=date.getDate();
        if (day==denyDate)/* <-- use it here */{
            return [false];
        }else{
            return [true];
        }
    }
});

$( ".ui-state-default" ).on('click',function(e){
    value= e.toElement.outerText; /* i want to pass this value to beforeShowDay*/
})

Update: I misunderstood the question (did not read carefully) and missed the key point that OP desired denyDate to be set in the .on(click) function. For this answer to be correct, it had to look like this:

var denyDate;  // <-- denyDate gets its value below

$( "#datepicker" ).datepicker({
    beforeShowDay: function(date){
        var day=date.getDate();
        if (day==denyDate)/* <-- use it here */{
            return [false];
        }else{
            return [true];
        }
    }
});

$( ".ui-state-default" ).on('click',function(e){
    denyDate = e.toElement.outerText; /***** <=== THIS IS THE CHANGE *****/
});

Sherali Turdiyev understood, though, and he got the right answer. Well done Sherali.

Upvotes: 1

saroj
saroj

Reputation: 121

setting global variable work for me

check my demo here

 $(function () {

  var value;/* setting global variable  */

         $( "#datepicker" ).datepicker({
          minDate:0,
           beforeShowDay: function(date){
           var day=date.getDate();
            if (day==value)/* passing dynamic value here from datepicker event */{
             return [false];
            } else{
             return [true];
            }; 



             }});
$(".ui-state-default").on('click', function (e) {
   value= e.toElement.outerText;
  })

});

Upvotes: -1

Sherali Turdiyev
Sherali Turdiyev

Reputation: 1743

You just declare value outside of click method. And replace 31 to value. After that, it will work. 

$(function(){ 
    var value;

   $( "#datepicker" ).datepicker({
     beforeShowDay: function(date){
     var day=date.getDate();
      if (day==value)/* i want to pass dynamic value here */{
       return [false];
      } else{
       return [true];
      }; 



       }});

 $( ".ui-state-default" ).on('click',function(e){
        value= e.toElement.outerText; /* i want to pass this value to beforeShowDay*/
         })
 });

Upvotes: 2

Matthew
Matthew

Reputation: 817

The beforeShowDay option is expecting a callback function with specific parameters, so you can't just pass your own value. However, you could make a global variable or create a hidden input field which stores a value, either of which can be referenced inside your function.

Here's an example using a hidden input field. The field will not be visible to the user, and the value can be updated at any time via JavaScript/jQuery (as shown in the click event handler).

http://jsfiddle.net/mwatz122/j3eq4q7c/1/

HTML:

Date:
<div id="datepicker"></div>
<input id="beforeShowDayValue" type="hidden" value="5" />

JS:

$(function () {

    $("#datepicker").datepicker({
        beforeShowDay: function (date) {
            var day = date.getDate();
            if (day == $('#beforeShowDayValue').val()) /* i want to pass dynamic value here */
            {
                return [false];
            } else {
                return [true];
            };
        }
    });

    $(".ui-state-default").on('click', function (e) {
        $('#beforeShowDayValue').val('31'); /* i want to pass this value to beforeShowDay*/
    })
});

Upvotes: 1

Related Questions