2

我有应用程序，我需要在条件语句中显示日期选择器。我正在使用带有 durandal 和淘汰赛的热毛巾。条件语句父级与敲除绑定，如下所示。

<section data-bind="foreach: resourceProperty">


    <span data-bind="text: associatedStandardResourceProperty().name " style="width:150px;float:left;"></span>

    <!-- ko if: associatedStandardResourceProperty().isDateTime   -->
                <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

    <!-- /ko -->

另外，我在 viewAttached 事件中的视图模型中启动了绑定，如下所示。

function viewAttached(view) {
    $(view).find('#dummyDiv').datepicker();
    $(view).find('#dp3').datepicker();


    return true;
}

这里 dummyDiv 是临时 div，我用它来检查 datepicker 是否在没有淘汰声明的情况下正常工作，并且它在 ko foreach 之外。我已经检查过了，我可以在 foreach 之外为虚拟日期选择器正确绑定。

我想知道当我们在每个带有 if 条件的淘汰赛中使用日期选择器时如何实现/启用日期选择器，如上所示。

谢谢。

4

2 回答 2

1

我的表格中有这个

<tbody data-bind='foreach: viewModel.contents'>
                <tr>
                    <td>
                        <input type="text" class='span2 datepicker' data-bind='value: parseJsonDateString(scec_dt_sop)' />
                    </td>
                    <td>
                        <input type="text" class='number span2' data-bind='value: scec_life_time, uniqueName: true' />
                    </td>
                </tr>
            </tbody>

我的javascript中有这个

 var parseJsonDateString = function (date_string) {
            if (date_string) {
                var value = new Date(parseInt(date_string.replace(/(^.*\()|([+-].*$)/g, '')));
                var date =  value.getDate() + "-" + (value.getMonth() +1) +"-" + value.getFullYear();
                return date;  
            }
            return "";
        };

        var initialData = @if (Model != null && Model.ScenarioContentGrid != null)
                          {
                              @Html.Raw(new JavaScriptSerializer().Serialize(Model.ScenarioContentGrid))
                          };

        var viewModel = {
            contents: ko.observableArray(initialData),
            showCalendar: function() {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'}); 
            },


        };

        $(document).ready(function() {
            $(function () {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'});
            });

            ko.applyBindings(viewModel);

          });

我创建了一个函数 showCalendar() 以提供在页面加载后显示弹出日历的可行性，然后我可以在某些控件的情况下调用它，例如，单击按钮我创建另一个日期选择器并调用它显示弹出日历的功能。

注意：不要忘记包含 bootstrap-datepicker 组件（javascript 和 css）

于 2013-07-18T21:53:47.067 回答
1

为什么不像这样向您的 div 添加一个类：

<div class="input-append date" class="custom-dp" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
</div>

然后在您的 viewAttached 函数中调用：

$('.custom-dp').datepicker();
于 2013-06-14T13:27:47.613 回答