Dynamic minDate and maxDate for jQuery ui datepicker

Question

I have multiple links that trigger a dialog which shows the date picker. Each date picker has date range based on data-attributes. My problem is the date picker only show range from the first link you click. Here is the code I have so far:

<div id="dialog" style="display:none">
    <input class="tanggalan" value="2014-04-03"/>
</div>
<a class="date-dialog" href="#" data-tgl-min="2013-03-12" data-tgl-max="2013-04-12">min: 2013-03-12 and max: 2013-04-12</a><br />
<a class="date-dialog" href="#" data-tgl-min="2013-04-15" data-tgl-max="2013-05-15">min: 2013-04-15 and max: 2013-05-15</a><br /><br />

And this is for the JavaScript:

$(".date-dialog").live("click", function () {
    var minDates = $(this).data('tgl-min');
    var maxDates = $(this).data('tgl-max');
    $('#dialog').dialog({
        height: 250,
        modal: true,
        buttons: {
            "Batal": function () {
                $(this).dialog("close");
                var minDates = '';
                var maxDates = '';
            }
        },
        open: function (event, ui) {
            //show datepicker
            $(".tanggalan").datepicker({
                minDate: minDates,
                maxDate: maxDates,
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
            });
            $(".tanggalan").datepicker("show");
        },
        close: function (event, ui) {
            //console.log('ditutup');
            //trying to clear the variable, 
            //cleared but still false to display date range if i click another link
            var minDates = '';
            var maxDates = '';
            console.log(minDates + ' --> ' + maxDates);
        }
    });
});

For complete code, i already put on here: http://jsfiddle.net/ajibari/4d23Y/

Answer 1

When you click the second link (after clicking the first) the first date picker is still bound to the input field on the dialog. I added the following code to remove the datepicker completely when the dialog is closed:

close: function(event, ui){
    $(".tanggalan").datepicker("destroy");
    ...
}

This removes the datepicker when the dialog is closed so that next time one is created it contains the correct min and max dates.

See here for a Fiddle.