jQuery UI Datepicker 设置显示月份答案

【问题标题】：jQuery UI Datepicker set display monthjQuery UI Datepicker 设置显示月份
【发布时间】：2015-05-14 20:27:34
【问题描述】：

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

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

html:

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

javascript：

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

【问题讨论】：

标签： jquery jquery-ui datepicker

【解决方案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。如果您使用的是内联版本

你可以用 jQuery 点击事件来“点击”按钮：

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

【讨论】：

抱歉，我应该指定我使用的是内联示例，jqueryui.com/datepicker/#inline
嗯，是的，知道这会很方便））检查更新的帖子！
你不应该写这样的代码。如果您最终将代码本地化以在其他语言环境中工作，那将是一个坏主意。突然之间，这打破了。依赖系统提供的 API。
@dman2306 总的来说你是对的。 jQueryUI Datepicker 小部件也有 'dateFormat' 选项，如果设置了，那么日期将仅以这种方式显示，而不考虑语言环境。重写了那部分。
哇，我没想到你的内联解决方案！就我而言，我需要使用月份参数来设置它，月份+“dayandyear”。如果我能得到当前显示的月份，那么我就可以将它与那个月份进行比较并使用上一个/下一个按钮。你知道如果没有选择日期是否可行吗？

【解决方案2】：

事实：

$("#datepicker").datepicker("setDate", date) 应该用于设置 “选定日期”。作为副作用，它还会改变“显示月”。但仅将其用于设置“显示月份”不是一个好习惯。
$('#datepicker .ui-datepicker-prev').click() 和$('#datepicker .ui-datepicker-next').click() 应该用于设置“显示月份” 而且它没有副作用。但请注意，如果您将“显示月份”设置为几年后，速度会很慢。
没有直接获取当前“显示月份”的功能。

根据事实，以下是解决方案：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

我认为这不适用于内联日期选择器。抱歉，我之前没有指定。
我更新了小提琴。它适用于内联日期选择器。 jsfiddle.net/seadonk/uh9g9sn4
这很好用，除了它设置了更改月份时的特定日期，我试图避免。
当月份更改时，它只是减少或增加月份编号，日期保持不变，它需要 setdate 来执行此操作。这似乎符合您对 prev 的描述。月和下个月。你需要它具体做什么？为什么这还不够？