datepicker-link plugin

by yahermann

HTML

<span class="some-datepicker-class"><a href="#">2018-05-01</a></span>

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// datepicker-link plugin for jquery
// (c) Jovial, Spc. 
// Licensed under GNU GPL v3.0
// 
// requires jQueryUI.datepicker
//
// HTML:
//
//   <span class="some-datepicker-class">
//     <a href="(some link)" data-date-param="(some date param)">(some initial date)</a>
//   </span>
//
// (wrapping <span> is required due to constraints/bugs in jQueryUI.datepicker)
//
// USAGE:
//   $('span.some-datepicker-class').datepicker_link( [options, same as datepicker] );
//
// (note default options provided below, including an onSelect handler)
//
(function($) {

    var defaultOptions = {
        dateFormat: 'yy-mm-dd',
        prevText: '<i class="fa fa-angle-left"></i>',
        nextText: '<i class="fa fa-angle-right"></i>',
        onSelect: function(date) { 

            var link = $(this).siblings('a');
            link.css('pointer-events', 'none');

            if ( link.attr('href').length > 1 ) {
              var loc = link.attr('href');
              if ( link.attr('data-date-param') ) {
                loc += ( loc.indexOf('?') == -1 ? '?' : '&' ) + link.attr('data-date-param') + '=' + date;
              }
              location.href = loc;
            }

        }
    };

    $.fn.datepicker_link = function(options) {

        options = $.extend({}, defaultOptions, options || {});

        return this.each( function() {
            var jq = $(this);

            jq.append('<input type="hidden"><span></span>');

            jq.find('input').datepicker( options );

            jq.find('a').click(function() {
              $(this).siblings('input').val( $(this).html() ).datepicker('show');
              return false;
            });

        });

    }

})(jQuery);


$('span.some-datepicker-class').datepicker_link({
  onSelect : function(date) {
    alert('date='+date);
  }
});