Question

最近我将Jquery的datepicker集成到我的网站中，它运行良好。

现在我遇到了一个我无法找到解决方案的问题。

我想让datepicker上的日期按钮变为<a></a>标记。这意味着例如当光标悬停在“2014-09-09”日期时，浏览器的状态栏（左下角）中显示的URL为：mysite.com/look-for-date?date="2014- 09-09“

我能用Jquery Datepicker实现吗？如果可能的话，我很想学习如何！谢谢！

Answer 1

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);
          });

        },
    });

解决方案2 - div targtet

新： 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');
          });          

        },
    });
});

在jquery datepicker的日期按钮上实现url

1 个答案: