CODEWITHSUNDEEP
jqueryjquery-uidatepicker
JoJo
JoJo

Reputation: 43

jQuery UI Datepicker set display month

I need to set the display month on a datepicker in the click event of another control. Is that possible? I can't use the setDate method since that will set a specific date, whereas I'm trying to emulate the prev/next month buttons on the datepicker.

EDIT: I'm using the inline datepicker https://jqueryui.com/datepicker/#inline

html:

<input type="button" onclick="ChangeMonth(1);" />

javascript:

function ChangeMonth(month)
{
    //set month on datepicker
    $("#DatePicker").???
}

Upvotes: 3

Views: 15002

Answers (3)

Luo Jiong Hui
Luo Jiong Hui

Reputation: 5670

The facts:

  • $("#datepicker").datepicker("setDate", date) should be used for set "selected date". As a side effect, it will also change the "display month". but use it only for setting "display month" is not a good practice.
  • $('#datepicker .ui-datepicker-prev').click() and $('#datepicker .ui-datepicker-next').click() should be used for setting "display month" and it does not have side effects. But be aware, it is slow if you set the "display months" a few years away.
  • There is no function to get current "display month" directly.

Based on the facts, here is the solution:

var currentDate = new Date ();
var currentMonth = new Date (currentDate.getFullYear(), currentDate.getMonth(), 1);

//Keep currentMonth sync with "display month"
$("#datepicker").datepicker({
    onChangeMonthYear: function (year, month, inst) {
        currentMonth = new Date(year, month - 1, 1);  
        //JavaScript used 0...11 for months. Jquery UI used 1...12 for months.
    },
});


function ChangeMonth(month)
{
    while (currentMonth < month) {
        $('#datepicker .ui-datepicker-next').click();
    };

    while (currentMonth > month) {
        $('#datepicker .ui-datepicker-prev').click();
    };
};

Upvotes: 1

Brino
Brino

Reputation: 2502

To set the month of a date picker use the following code:

var date = $("#datepicker").datepicker( 'getDate' );
date.setMonth(month);
$("#datepicker").datepicker("setDate", date);

JSFIDDLE https://jsfiddle.net/seadonk/uh9g9sn4/
This is an example of how to set the month, decrement the month, or increment the month of a date picker.

JQUERY 

$().ready(function(){
   $("#SetMonth").click(function(){SetMonth(parseInt($('#month').val())-1);});
   $("#NextMonth").click(function(){NextMonth();});
   $("#PrevMonth").click(function(){PrevMonth();});
   $("#datepicker").datepicker();
   $("#datepicker").datepicker("setDate",new Date());
});

function SetMonth(month)
{
    var date = $("#datepicker").datepicker( 'getDate' );
    date.setMonth(month);
    $("#datepicker").datepicker("setDate", date);
}

function NextMonth()
{
    var date = $("#datepicker").datepicker( 'getDate' );
    date.setMonth(date.getMonth() + 1);
    $("#datepicker").datepicker("setDate", date);
}

function PrevMonth(month)
{
    var date = $("#datepicker").datepicker( 'getDate' );
    date.setMonth(date.getMonth() - 1);
    $("#datepicker").datepicker("setDate", date);
}

HTML

<input type="button" id="SetMonth" value="Set Month" />
<input type="text" id="month" value = "1"/><br /><br />    
<input type="button" id="PrevMonth" value="Prev Month" />
<div id="datepicker"></div>
<input type="button" id="NextMonth" value="Next Month" />

Upvotes: 0

shershen
shershen

Reputation: 9993

Assuming you have mm/dd/yyyy mask, like in the demo you could do like this:

UPD2. Using Datepicker API

function ChangeMonth(month)
{
   var initialVal = $('#datepicker').datepicker('getDate')
   curMonth = date.getMonth(),

   if(month > 0 && curMonth < 12){
      initialVal.setMonth(curMonth + 1)
   } 
   if(month < 0 && curMonth > 1) {
      initialVal.setMonth(curMonth - 1)
   }
   $('#datepicker').datepicker('setDate', initialVal);
}

The calling ChangeMonth(1) or ChangeMonth(-1) should change the date in your datapicker field.

UPD1. If you're using inlined version

You can just "click" buttons with jQuery click event:

$('#datepicker .ui-datepicker-prev').click() // month back
$('#datepicker .ui-datepicker-next').click() //month forward

Upvotes: 3

Related Questions