jQuery UI Datepicker设置显示月份

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

编辑：我使用的是直列日期选择器https://jqueryui.com/datepicker/#inline

HTML：

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

的javascript：

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

来源

2015-05-14 JoJo

假设你有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)改变你datapicker场的日期。

UPD1。如果您使用内嵌版本

您只需“点击”使用jQuery单击事件按钮：

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

来源

2015-05-14 20:42:06 shershen

对不起，我应该我使用的是直列例如指定，https://jqueryui.com/datepicker/#inline – JoJo

嗯，是的，这将很方便知道））检查更新的帖子！ – shershen

你不应该写这样的代码。如果您将代码本地化以在其他语言环境中工作，这是一个糟糕的主意。突然之间，这就打破了。依靠您的系统提供的API。 – dman2306

要设置日期选择器的使用一个月以下代码：

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

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

来源

2015-05-14 21:00:31 Brino

我不认为这将与内联datepicker一起工作。对不起，我没有指定更早。 – JoJo

我更新了小提琴。它与内联日期选择器一起工作良好。 https://jsfiddle.net/seadonk/uh9g9sn4/ – Brino

这很好，除了它设置一个特定的日期，当月改变，我试图避免。 – JoJo

事实：

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

来源

2016-02-29 20:57:34

jQuery UI Datepicker设置显示月份

回答

相关问题