jQuery UI Datepicker设置显示月份

Question

我需要在另一个控件的点击事件中设置日期选择器的显示月份。那可能吗？我不能使用 setDate 方法，因为它会设置一个特定的日期，而我正在尝试模拟日期选择器上的 prev/next 月份按钮。

编辑： 我正在使用内联日期选择器 https://jqueryui.com/datepicker/#inline

html:

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

javascript:

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

Answer 1

假设您有 mm/dd/yyyy 面具，like in the demo 您可以这样做：

UPD2。使用日期选择器 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);
}

调用 ChangeMonth(1) 或 ChangeMonth(-1) 应该更改数据选择器字段中的日期。

UPD1。如果您使用的是内联版本

您可以只 "click" 个带有 jQuery 单击事件的按钮：

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

Answer 2

要设置日期选择器的月份，请使用以下代码：

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

JSFIDDLE https://jsfiddle.net/seadonk/uh9g9sn4/
这是一个示例，说明如何设置月份、减少月份或增加日期选择器的月份。

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" />

Answer 3

事实：

$("#datepicker").datepicker("setDate", date) 应该用于集合 "selected date"。作为副作用，它还会改变“显示月”。但仅将其用于设置 "display month" 不是一个好的做法。
$('#datepicker .ui-datepicker-prev').click() 和 $('#datepicker .ui-datepicker-next').click() 应该用于设置 "display month" 而且它没有副作用。但请注意，如果您将 "display months" 设置为几年后，速度会很慢。
没有直接获取电流的函数"display month"。

根据事实，给出解决方案：

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();
    };
};

jQuery UI Datepicker设置显示月份

jQuery UI Datepicker set display month

jquery

jquery-ui

datepicker