get id of datepicker element in jquery datepicker

<script>
var disabledDays = [0, 6];
$(function()
{
        $(".showcal").datepicker({
        language: 'en',
        position:'top left',
        multipleDates:10,
        multipleDatesSeparator:', ',
        onRenderCell: function (date, cellType)
        {
            if (cellType == 'day')
            {
                var day = date.getDay(),
                isDisabled = disabledDays.indexOf(day) != -1;
                return 
                {
                    disabled: isDisabled
                }
            }
        }
    })
});
</script>

HTML is:

<div name="pubCalendar" class="showcal cp" id="pub1" value=""></div>
<div name="pubCalendar" class="showcal cp" id="pub2" value=""></div>    
<div name="pubCalendar" class="showcal cp" id="pub3" value=""></div>    
<div name="pubCalendar" class="showcal cp" id="pub4" value=""></div>

As above I have multiple datepickers and i want to set the disabledDays javascript variable different for all of them.How can i do that? In current code disabledDays is same for all of the datepickers but based on the datpicker which is getting initialised I also want to set the disabledDays variable for it. How can i achieve that.Pls help.

Answers 1

  • Working code:

    <script>
    var disabledDays = [0, 6];
    $(function()
    {
    $('.showcal').each(function()
    {
        var id=this.id;
        if(this.id=="pub1")
                    disabledDays = [0];
            if(this.id=="pub2")
                    disabledDays = [0,6];
            $("#"+id).datepicker({
            language: 'en',
            position:'top left',
            multipleDates:10,
            multipleDatesSeparator:', ',
            onRenderCell: function (date, cellType)
            {
            if (cellType == 'day')
            {
                var day = date.getDay(),
                isDisabled = disabledDays.indexOf(day) != -1;
                return 
                    {
                        disabled: isDisabled
                    }
            }
            }
        })//End of datepicker function
      });//End of .each
    });
    </script>
    

Related Articles