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設置顯示月份

回答

相關問題