选择下拉列表中的日期选择器

Question

我想知道使用 jQuery 之类的东西是否可以实现以下操作。我找遍了，但没有找到解决办法。

我在我的项目中使用 MVC 3/razor。我有 jQuery 1.5.1。

我们想要一个显示几个选项的下拉（选择）框： - 每月 - 每年 - 每周 - 日期

如果用户选择“日期”，我想显示一个日历框，然后将所选日期记录为选择框中的值。如果他们再次单击选择框，他们可以根据原始选择值更改值。

在我的项目中，同一页面上有几个这样的框。也许我可以通过类值将它们与点击操作联系起来？

到目前为止，我发现的最接近的请求是：jQuery ui.datepicker on 'select' element ...但我还不能让它为我的项目工作。

感谢任何帮助。

更新 我需要绑定的添加元素会动态插入到页面中。也许这就是我的挑战的来源。

更新

这是我目前正在使用/处理的一些代码：

首先 - 我的代码是从模板动态添加的。我要绑定的字段在下方，并且可能在整个页面中存在多次：

<td><select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked">
                <option value="month">Month</option>
                <option value="annual">Annual</option>
                <option value="date" class="datepick">Date</option>
                </select>
</td>

在动态添加表单的主页上，我有以下尝试将日期选择器添加到选项“日期”。

$(".periodworked").live("change", function () {
    if ($(this).val() == "date") {
        alert("In... now how to throw date picker....");
    }
})

最后 - 将其绑定到各个字段...有没有办法使用 $(this) 来处理它，还是我必须想出其他方法来找到我选择的特定选择？

更新

感谢您的帮助 - 我设法让它工作了。我知道我的情况非常具体，但如果它可以帮助其他人，这里是代码......

首先 - 通过 CSS，我使用颜色来隐藏表单字段（与表格的背景颜色相同 - 模拟 MS Excel 外观）。显示日期选择器的输入字段的字体颜色使用相同的颜色来防止看到任何文本（尽管如果看到它只是在字段隐藏之前闪烁）。

在我的模板中，我将单元格修改如下：

<td><select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" class="periodworked add-date">
                <option value="month">Month</option>
                <option value="annual">Annual</option>
                <option value="date" class="datepick">Date</option>
                </select>
                <input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" /></td>

在我的主页中，我不得不做一些“有趣”的事情。代码如下：

$("select.add-date").live("change", function () {
    if ($(this).val() == "date") {
        //alert("In... now how to throw date picker....");         
        $(this).parents('td').find('input.datepicker').show();
        $(this).parents('td').find('input.datepicker').datepicker({
            onSelect: function (dateText, inst) {
                var opt = $('<option />').attr('value', dateText).attr('selected', 'selected').text(dateText);
                var select = $(this).parents('td').find('select.add-date');
                // NOTE: ommitted code to check if the date is already in the select     
                $(select).append(opt);
            }
        }).focus();
    } else {
        $(this).parents('td').find('input.datepicker').hide();
    }
});

$('input.datepicker.for-option').live('blur', function (dateText, inst) {     
    $(this).hide(); 
});

您会注意到我已将日期选择器添加到实时/更改功能的输入中。出于某种原因，这是它工作的唯一方式（反对将日期选择器放在现场之外）。这也允许我使用 onSelect 方法从日历中正确提取所选值，因为无论出于何种原因，模糊都没有检索该值并返回空白结果。

我的 blur 方法只是隐藏了包含日历的输入字段。

这一切都很好 - 但在我的情况下，我通过复制表的第一行并将其附加到现有表来动态添加许多字段。除非您在该行中使用日期选择器，否则一切正常。在这一点上，一个类和 id 被分配给 datepicker 的输入对象，然后被复制，并且搞砸了一切。为了解决这个问题，我在我的 insertRow 函数中添加了一个方法来基本上删除插入并重新编写它。上帝，我希望这是有道理的......代码：

    function addLines(formNum, lines) {
        for (var l = 0; l < lines; l++) {
            var table = document.getElementById("formTable_" + formNum);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for (var i = 0; i < colCount; i++) {
                var newcell = row.insertCell(i);

                if (table.rows[1].cells[i].innerHTML.search('name="PeriodWorked"') != -1) {
                    newcell.innerHTML = table.rows[1].cells[i].innerHTML.substr(0, table.rows[1].cells[i].innerHTML.search("<input"));
                    newcell.innerHTML = newcell.innerHTML +
                        '<input name="tempDatePicker" type="text" size="1" class="datepicker for-option" style="display:none; color: #EFEFEF;" />';
                } else {
                    newcell.innerHTML = (table.rows[1].cells[i].innerHTML);//.replace(" hasDatepicker", "");
                }

                //newcell.childNodes[0].id = "f" + formNum + "_" + newcell.childNodes + (1 + parseInt(newcell.childNodes[0].id.substr(newcell.childNodes[0].id.lastIndexOf("_") + 1));

                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = "";
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        //resetDatePicker();
                        break;
//                  default:
//                      newcell.innerHTML = "";
//                      break;
                }
            }
        }
    }

再次感谢您的帮助！

Answer 1

要回答您问题的 jquery 部分，您可以这样做：

<td>
    <div>
        <select id="f${FormCount}_PeriodWorked[]" name="PeriodWorked" 
            class="periodworked add-date">
            <option value="month">Month</option>
            <option value="annual">Annual</option>
            <option value="date" class="datepick">Date</option>
        </select>
    </div>
    <div>
        <input type="text" class="datepicker for-option" style="display:none;" />
    </div>
</td>

...然后...

$('input.datepicker').datepicker();
$("select.add-date").live("change", function () {
    if ($(this).val() == "date") {
        //alert("In... now how to throw date picker....");
        $(this).parents('td').find('input.datepicker').show();
    }
    else {
        $(this).parents('td').find('input.datepicker').hide();
    }
});
$('input.datepicker.for-option').live('blur', function() {
    var select = $(this).parents('td').find('select.add-date');
    // NOTE: ommitted code to check if the date is already in the select
    $('<option value="' + $(this).val() + '" selected="selected">' + 
        $(this).val() + '</option>').appendTo(select);
    $(this).hide();
});

这应该适用于文本框模糊，但您可以使用the datepicker's onSelect event 将选项添加到选择中。我使用模糊，因为我知道它适用于现场。