Question

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

编辑：我使用内联日期选择器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。使用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);
}

调用ChangeMonth(1)或ChangeMonth(-1)应更改datapicker字段中的日期。

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

你可以点击＆＃34;点击＆＃34;使用jQuery click事件的按钮：

$('#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)应该用于设置＆＃34;选择日期＆＃34;。作为副作用，它还会更改＆＃34;显示一个月＆＃34 ;.但仅用于设置＆＃34;显示月份＆＃34;这不是一个好习惯。
$('#datepicker .ui-datepicker-prev').click()和$('#datepicker .ui-datepicker-next').click()应该用于设置＆＃34;显示月份＆＃34; 它没有副作用。但要注意，如果你设置'＃34;显示月份＆＃34;几年之后。
没有任何功能可以获得当前＆＃34;显示月份＆＃34;直接

根据事实，这是解决方案：

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设置显示月份

3 个答案: