CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Ray Cheng
Ray Cheng

Reputation: 12586

How to render days as links for jQuery datepicker?

I would like to turn the days in datepicker into links. How can I do that? I know it has onSelect, but that doesn't give visual clues to users when they mouse over the days.

I tried the following but it does seem to execute the callback function. using jQuery UI v1.9.2 and jQuery v1.8.1.

$(document).ready(function () {
    $("#datepicker").datepicker({
        renderCallback: function ($td, thisDate, month, year) {
            alert('hi');
        }
    });
});

UPDATE

Even the workarounds are easy to implement, I decided to go with Kevin B's approach. Here's the whole thing.

var old_generateHTML = $.datepicker._generateHTML;
$.datepicker._generateHTML = function () {
    function getMonth(s) {
        var months = {
            'January': '01', 'February': '02', 'March': '03', 'April': '04', 'May': '05', 'June': '06',
            'July': '07', 'August': '08', 'September': '09', 'October': '10', 'November': '11', 'December': '12'
        }
        return months[s];
    }
    var ret = old_generateHTML.apply(this, arguments);
    var month = ret.replace(/^.*month">([a-z]+)<\/span.*$/i, "$1");
    var year = ret.replace(/^.*year">([0-9]{4})<\/span.*$/i, "$1");
    ret = ret.replace(/href="#">([0-9]{1,2})<\/a>/g, "href=\"process.php?date=" + getMonth(month) + "/$1/" + year + "\">$1</a>");
    return ret;
};

$(document).ready(function () {
    $("#datepicker").datepicker();
});

Upvotes: 2

Views: 2370

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22580

If I get what you mean, then you only need add the following to your CSS:

.ui-datepicker td a {
    text-decoration: underline !important;
    color: #1122CC !important; /* For a more traditional Blue use '#0000FF' */
}

You can easily change the links of all the Dates with something like:

$("#datepicker").datepicker().on("click", function(e) { //  must be done on input click as the div is recreated everytime
    $(".ui-datepicker td a").each(function(i) { //  filters through each date
        //  the following grabs the href property and replaces the # tag with the text (aka. the date)
        $(this).prop("href", $(this).prop("href").replace("#", $(this).text()))
        //  I think this could easily be shortened to:
        //  $(this).prop("href", $(this).text()) 
    })
})

jsFiddle

another Example in this ver I add a Title attribute to each one

  • Note: The only thing I have found you can't really edit is the text. The text is used to determine the Date.

UPDATE

It's a little hackish in that I have to use a small timer (really shouldnt be an issue), but I found a way to deal with continueing the change on Clicking to change month and/or year. The reason for the timer is simple, rendering. The "new" days arn't rendered till a split second after the even takes place, thus the reason for the timer.

The NEW Script

function updateDates() {
    $(".ui-datepicker td a").each(function(i) {
        $(this).prop("href", $(this).prop("href").replace("#", $(this).text()))
    });
}

$( "#datepicker" ).datepicker({
    onChangeMonthYear: function (year, month, inst) {
        setTimeout(function() { updateDates(); }, 500);
    }
}).on("click", function(e) {
    $(".ui-datepicker td a").each(function(i) {
        updateDates();
    })
});

the New Example

Upvotes: 1

Kevin B
Kevin B

Reputation: 95056

I suggest extending the generateHTML method so that every time the html for the datepicker is generated, your links are created.

Demo: http://jsfiddle.net/C4jWz/1/

var old_generateHTML = $.datepicker._generateHTML;

$.datepicker._generateHTML = function() {
    var ret = old_generateHTML.apply(this,arguments);
    ret = ret.replace(/href="#">([0-9]{1,2})<\/a>/g, "href=\"process.php?day=$1\">$1</a>");
    return ret;    
};

//<a class="ui-state-default ui-state-hover" href="#">13</a>

$( "#datepicker" ).datepicker();

This one in particular only gets the day, the month/year can be obtained the same way.

Upvotes: 2

eric.itzhak
eric.itzhak

Reputation: 16072

I guess you need to do something like this (not tested, mostly logic):

$('#datepicker .ui-state-default').each( function() { // i think only the days 
//have this class, you can try and use 'ui-state-default a' 
// or something like that
var thisText = $(this).text();
var href = checkWhichLinksIsThis(thisText);
$(this).attr('href', href);
});

Which basically i did here is iterate through all the days link, check by text which one is it with the checkWhichLinkIsThis method and change the href accordingly.

Hope this sets you in the general direction.

Upvotes: 0

Related Questions