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，那么这里只显示月份和日期

＆＃13;

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

＆＃13;

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

＆＃13;

但是，我认为你过度复杂，如果你只需要两个下拉菜单，一个月份，一个月份，只需使用它，你不需要一个日期选择器，在我看来它＆＃ 39;当用户不应该选择真实日期，只是一个月中的某一天时，有两个常规下拉菜单，而不是显示带有日期选择器的日期的输入，这是一个非常好的用户体验。

如果原生选择的样式看起来很无聊，请添加其他样式

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

仅为月和日获取Jquery选择器

3 个答案: