CODEWITHSUNDEEP
jqueryurldatepicker
f855a864
f855a864

Reputation: 277

Implementing url on jquery datepicker's date button

Recently I have integrated Jquery's datepicker into my website and it worked fine.

Now I have came to a problem that I can't figure out a solution.

I want to make the date buttons on the datepicker become <a></a> tag. That mean for example when the cursor hover on the "2014-09-09" date, the url appear in the status bar (left bottom) of the browser is : mysite.com/look-for-date?date="2014-09-09"

Can i achieve that using Jquery Datepicker? If possible, I'm eager to learn how! Thanks!

Upvotes: 1

Views: 145

Answers (1)

dm4web
dm4web

Reputation: 4652

http://jsfiddle.net/k2faz58e/1/

HTML:

<p>Date: <input type="text" id="datepicker"></p>

JQ:

$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }

    $( "#datepicker" ).datepicker({
        afterShow :function(){
         var $dp=$("#ui-datepicker-div");

          $dp.find('.ui-state-default').each(function(){
                var $td=$(this).parents('td');
                var month=parseInt($td.attr('data-month'));                
                month++;
                var year=$td.attr('data-year')
                var day=parseInt($(this).text());
                if(month<10) month='0'+month;
                if(day<10) day='0'+day;
                var date=year+'-'+month+'-'+day;
              $(this).attr('href','mysite.com/look-for-date?date='+date);
          });

        },
    });

SOLUTION 2 - div targtet

new: http://jsfiddle.net/4p0trbz2/

HTML:

<p>Date: <div id="datepicker"></div></p>

JQ:

$(function() {

    //http://stackoverflow.com/questions/6334898/jquery-datepicker-after-update-event-or-equivalent
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
        {
            afterShow.apply( $( "#datepicker" )[0]);  // trigger custom callback
        }
    }

    $( "#datepicker" ).datepicker({
        afterShow :function(){
         var $dp=$(".ui-datepicker-inline");
         $dp.css( "display", "block" );

          $dp.find('.ui-state-default').each(function(){
                var $td=$(this).parents('td');
                var month=parseInt($td.attr('data-month'));                
                month++;
                var year=$td.attr('data-year')
                var day=parseInt($(this).text());
                if(month<10) month='0'+month;
                if(day<10) day='0'+day;
                var date=year+'-'+month+'-'+day;
                $(this).attr('href','mysite.com/look-for-date?date='+date);
          }).click(function(){
                window.location=$(this).attr('href');
          });          

        },
    });
});

Upvotes: 2

Related Questions