How do I hide the next/today/previous navigation in jQuery DatePicker and turn off animations?

Question

How do I hide the prev/today/next navigation in jQuery DatePicker?

I'm happy with just the Month and Year drop down boxes.

Also how do I disable the animations?

@tvanfosson - I already tried hideIfNoPrevNext but that only works if you don't have a date range that spans two months.

The duration option did the trick at turning off the animations though.

Cheers.

Answer 1

You can hide prev/next navigation via css. You can see examples which do it in themes http://marcgrabanski.com/pages/code/jquery-ui-datepicker

Answer 2

You can find the options for the DatePicker control at http://docs.jquery.com/UI/Datepicker/datepicker#options. Specifically, I think you want to set hideIfNoPrevNext to true and set duration to ''.

  $('#cal').datepicker( { hideIfNoPrevNext: true, duration: '' } );

Answer 3

Just hide buttons

$("div.ui-datepicker-header a.ui-datepicker-prev,div.ui-datepicker-header a.ui-datepicker-next").hide();

Answer 4

I too experienced this problem with DatePicker's default functionality. I was missing the link to jquery.ui.base.css. After including a ref to this file on my page, it worked like a charm. I did not have to tweak any css or did not have to set any property. Fyi.

Answer 5

Just modify the style to display none.

div.ui-datepicker-header 
a.ui-datepicker-prev,div.ui-datepicker-header 
a.ui-datepicker-next
{
    display: none;  
}

Answer 6

I know this is old but I found another way to do this. I used this one.

.focus(function () {
    $(".ui-datepicker-next").hide();
    $(".ui-datepicker-prev").hide();
});

You can do it like this..

$('#TextDateId').datepicker({
        dateFormat: "MM dd yyyy",
        changeMonth: true,
    }).focus(function () {
        $(".ui-datepicker-next").hide();
        $(".ui-datepicker-prev").hide();
    });

Answer 7

use this code, it will definitely work for stop navigation of next or prev button..

$("#cal").datepicker({
stepMonths: 0
)};