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

Question

我想知道使用 jQuery 之类的东西是否可以实现以下功能。我已经查看了所有内容，但没有找到解决方案。

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

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

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

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

到目前为止我发现的最接近的请求在这里： jQuery ui.datepicker on 'select ' 元素 ...但我还无法让它在我的项目中发挥作用。

任何帮助表示赞赏。

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

更新

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

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

<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 方法，该方法可以正确地从日历中提取所选值，因为无论出于何种原因，模糊都无法检索该值并返回空白结果。

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

这一切都工作正常 - 但就我而言，我通过复制表的第一行并将其附加到现有表来动态添加许多字段。除非您在该行中使用日期选择器，否则一切正常。此时，类和 id 被分配给日期选择器的输入对象，然后复制该对象，然后将所有事情搞砸。为了解决这个问题，我在 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();
});

这应该适用于文本框模糊，但您也许可以使用 日期选择器的 onSelect 事件 将选项添加到选择中。我使用了模糊，因为我知道它适用于现场。