获取仅包含月份和日期的Jquery选择器

Question

获取仅包含月份和日期的Jquery选择器

4

首先，感谢您能给予我的所有帮助，并抱歉我的英语不是我的母语。

我正在寻找一个解决方案（使用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”，但是当用户打开日历时，它会显示年份，这会引起混乱。

提前感谢您能给我的所有帮助。

- arkofdan

只是为了澄清，我正在使用这个链接：http://bootstrap-datepicker.readthedocs.org/en/latest/options.html - arkofdan

3个回答

1

如果您必须使用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>

- adeneo

嗨，谢谢你的回答。相信我，如果可以选择的话，我会删除所有那些奇怪的字段。但是我的老板真的希望它能像我们网站上使用的日期选择器一样。 - arkofdan

0

尝试：

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

停止在日期选择器中显示年份。

- DibsyJr

嗨，谢谢你的回答。但是我不想隐藏所有的日历年份，因为我的页面上有很多年份。而且与其他我看到的例子不同，我的没有分开月份和年份。（我没有制作前端）http://prntscr.com/ai4e0z - arkofdan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DBS · Accepted Answer

修改后，以符合我认为您想要的要求：

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/