Question

我一直在尝试在我的网站上添加日期选择器，允许用户选择多个非并发日期。 Multidatespicker似乎做了我想做的事情，但我已经到了一个点，我认为我发现了一个bug，特别是它的AltField，这已被确认here。该错误似乎停止了altfield的值显示。如果您访问Multidatespicker demo并检查altfield，您会看到当它显示为空时，值会显示在代码中。

这给我带来的问题是，从App / DB返回记录时，我无法编辑以前选择的日期。将altfield的值传递回我的Rails应用程序以进行数据库存储时，我只收到代码中显示的隐藏值。

如果我可以让altfield正确显示这些值并允许我通过日期选择器编辑它们，那么我应该在我的应用程序的后端进行修改。

注意上面github链接上的建议修复不能解决这个问题 - 它只能使'dateVar'中的日期在选择器中被选中....它不会在altField中显示值。

有没有人使用过这个并遇到同样的问题并解决了它？

有谁知道如何修复它？

OR

任何人都可以提出一个很好的替代方案，可以使用Twitter Bootstrap与Rails 3应用程序很好地协作。我能够选择多个非并发日期非常重要。我进行了相当广泛的搜索，但MultiDatesPicker似乎是我能找到的唯一选项之一。

Answer 1

问题是Multidatespicker没有正在侦听#altField所以我们需要创建自己的侦听器来添加/删除日期。

我们的想法是为hidden或readonly输入添加值，并通过其他输入添加/删除日期。这可以防止客户在#altField中添加日期并让它们被插件覆盖。

<强> HTML

<input type="text" id="date">

<button type="button" id="addDate">Add dates</button>

<button type="button" id="removeDate">Remove dates</button>

<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">

<强> JAVASCRIPT

使用javascript我们只需使用按钮添加日期（可以是关键字或您想象中可以想象的任何内容）。

var dates = $('#altField').val().split(',');


   $('#datepicker').multiDatesPicker({
   dateFormat: "yy-mm-dd",
   addDates: dates,
   altField: '#altField'
   });

    $('#addDate, #removeDate').on('click', function() {
        try {
            var $date = $('#date');
            var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates'; 

            $('#datepicker').multiDatesPicker(addOrRem, $date.val());
            $date.val('');
        } catch (e) {
            var $error = $('#error');
            $error.html(e).slideDown();
            setTimeout(function() {
                $error.slideUp();
            }, 2000);

        }
    });

jsFiddle

Answer 2

我已经扫描了MultiDatesPicker的来源。我没有找到任何从#altfield设置日期的方法。所以这不是一个错过的错误。我也不明白预选日期和altfield之间的区别。

我认为你可以通过预选和altfield的组合来做你想要的事情：

<强> HTML

   <div id="with-altField"></div>
    <input type="text" id="altField" value="08/22/2013,08/21/2013">
   </div>

<强>的javascript

//first read the values of the #altfield
var dates = $('#altField').val().split(',');

//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
    dateFormat: "mm/dd/yy",
    addDates: dates,
    altField: '#altField'
});

nb在准备好的文档上加载javascript

多日采摘虫？

2 个答案: