CODEWITHSUNDEEP
jquerydatepicker
jqs
jqs

Reputation: 82

jquery datepicker add extra text

How do I add extra line text within the calendar control of the datepicker plugin.

Datepicker opens on the focus of the date field

click of the date field

click calendar image

I need to add a p tag just below the calendar...is there a way to do that?

Upvotes: 3

Views: 8913

Answers (2)

simbu
simbu

Reputation: 11

It will not hide your text box and you can also edit the date.

$(".date-picker").datepicker({          
    showOn: "button",
    buttonImage: "Images/ico_calendar.png",
    buttonImageOnly: true,
    maxDate:"+6M",
    showOtherMonths: true

});
$('.date-picker').next().datepicker().bind('click', function() {
    $('<p>hello world</p>').insertBefore('.ui-datepicker-header');
});

Upvotes: 1

William Niu
William Niu

Reputation: 15853

You can append the text to the #ui-datepicker-div after the calendar has been rendered. One caveat is that the datepicker tries to find the date being entered in real time, which refreshes the #ui-datepicker-div. The means you need to observe both click and keyup events, and only insert the message if it is not there already.

$('.datepicker').datepicker().bind('click keyup', function() {
    if ($('#ui-datepicker-div :last-child').is('table'))
        $('#ui-datepicker-div').append('<p>hello world</p>');
});

See this in action: http://jsfiddle.net/william/ctqUa/1/.

Upvotes: 5

Related Questions