獲取Jquery選擇器僅適用於月份和日期

Question

首先，感謝你能給我的所有幫助，對不起我的英語，因為它不是我的母語。

我正在尋找一個解決方案（使用jquery selectpicker或其他插件），允許我設置文本字段並限制用戶只選擇一天一個月。

說明：我有一個用戶設置年度周期性提醒的情況，因此我有一個字段可以讓他選擇那些年度提醒的日期和月份。 我看了很多，但我找不到我要找的東西。 現在這是我最好的方法（代碼不是我的） http://jsfiddle.net/DBpJe/7755/ 。

我試圖將代碼更改為：

$(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: false,
    changeDay: true,
    showButtonPanel: true,
    dateFormat: 'dd MM',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedMonth, inst.selectedDay, 1));
    }
});
});

但沒有運氣。

有什么辦法可以做到這一點嗎？ 我在考慮一個簡單的選擇，但我想讓它變得更好。 此外，我可以按照它的方式離開選擇器，並在dateFormat參數中使用'dd MM'，但是當用戶打開日歷時，它將顯示年份，這將導致混淆。

在此先感謝所有幫助，你可以給我。

Answer 1

修改為我認為你做的事情：

http://jsfiddle.net/f6neo7ns/1/

$('.date-picker').datepicker({
    changeMonth: true,
    showButtonPanel: true,
    dateFormat: 'dd MM',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear,inst.selectedMonth, inst.selectedDay));
    }
});

• 刪除CSS將顯示日期選擇器。
• JS被更改為以dd MM格式返回完整的選擇日期

如果你想完全隱藏年份，你可以簡單地添加這個CSS：

.ui-datepicker-year{display: none}

如下所示： http ： //jsfiddle.net/f6neo7ns/2/

Answer 2

嘗試：

.ui-datepicker-year{
    display:none;
}

阻止年份顯示在datepicker中。

Answer 3

如果你必須使用datePicker，這里是如何只顯示月份和日期

 $(function() { $('.date-picker').datepicker({ changeMonth : true, yearRange : "2016:2016", showButtonPanel : true, dateFormat : 'dd MM', beforeShow : function(el, inst) { setTimeout(function() { inst.dpDiv.find('.ui-datepicker-year').hide(); },0); }, }); }); 

 <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> 

---

但是，我認為你過於復雜，如果你只需要兩個下拉菜單，一個月份，一個月份，只需使用它，你不需要一個日期選擇器，而且在我看來這是一個更好的用戶體驗，有兩個常規下拉菜單當用戶不應該選擇真實日期，而只是一個月中的某一天時，而不是顯示帶有日期選擇器的日期的輸入。

如果原生選擇的樣式看起來很無聊，請添加其他樣式

 $(function() { $('#month').on('change', function() { var date = new Date(); date.setMonth(+(this.value) + 1); date.setDate(0); var days = date.getDate(), opts = []; for (var i = 0; i < days; i++) { opts.push($('<option />', { text: i + 1, value: i + 1 })); } $('#day').html(opts); }).trigger('change'); }); 

 select { height: 29px; overflow: hidden; border: none; font-size: 14px; padding: 5px; -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: 97% center; background-repeat: no-repeat; border: 1px solid #AAA; color: #555; margin: 20px; padding: 5px 30px; white-space: nowrap; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Select a date for the yearly reminder</h2> <br/> <select id="day"></select> <select id="month"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select>