5

我一直在尝试向我的网站添加一个日期选择器，允许用户选择多个非并发日期。Multidatepicker似乎做了我想做的事，但我已经到了我认为我发现了一个错误的地步，特别是它的 AltField，这在此处得到确认。该错误似乎停止了 altfield 的值显示。如果您访问Multidatepicker演示并检查 altfield，您会看到虽然它显示为空，但值显示在代码中。

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

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

请注意，上面 github 链接上的建议修复不能解决此问题 - 它仅启用在选择器中选择的“dateVar”中的呈现日期......它不会在 altField 中显示值。

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

有谁知道如何修理它？

或者

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

4

2 回答 2

3

问题是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，我们只需使用按钮添加日期（可以在 keyup 上或您可以想象的任何东西上 :)

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

于 2013-08-31T02:01:16.800 回答
1

我已经扫描了 MultiDatesPicker 的来源。我没有找到任何从#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

于 2013-08-25T20:38:56.243 回答