HTML

Question

在其他情况下，我会将datepicker绑定到我的文本框，这将是直接的，但在这种情况下不会。

小提琴链接： http://jsfiddle.net/JL26Z/1/ ..虽然设置完美的seanrio我试过但无法将datepicker绑定到文本框。除了一切都到位

我的代码：

**<script id="Customisation" type="text/html">** // here i need to have text/html 



               <table style="width:1100px;height:40px;" align="center" >

                     <tr>

                    <input style="width:125px;height:auto;" class="txtBoxEffectiveDate" type="text" id="txtEffective" data-bind="" /> 
</tr>
    </script>

上面的代码用于动态生成相同的东西，当我每按一次按钮时，没有时间。所以上面的东西是模板化的东西。

我的淘汰代码：

    <div data-bind="template:{name:'Customisation', foreach:CustomisationList},visible:isVisible"></div>

<button data-bind="click:$root.CustomisatioAdd" >add </button>

我尝试使用相同的旧方法将其与datepicker绑定

$('#txtEffective').datepicker();  // in document.ready i placed

实际上为了测试这个我创建了一个带有一些id 外部脚本的文本框，带有text / html 和binded datepicker，它工作得很好，很遗憾它不适用于text / html中的文本框和我想不惜一切代价去工作。

PS：我没有发布我的视图模型，因为这个问题基于Senario不需要

使用Js添加的视图模型

var paymentsModel = function ()
{
            function Customisation()
            {
                var self = this;
            }

            var self = this;
            self.isVisible = ko.observable(false);
            self.CustomisationList = ko.observableArray([new Customisation()]);
            self.CustomisationRemove = function () {
                self.CustomisationList.remove(this);
            };
            self.CustomisatioAdd = function () {
                if (self.isVisible() === false)
                {
                    self.isVisible(true);
                }
                else
                {
                    self.CustomisationList.push(new Customisation());
                }
            };
}

    $(document).ready(function()
    {

        $('#txtEffective').datepicker();

        ko.applyBindings(new paymentsModel());

    });

赞赏任何可能的工作

问候

Answer 1

动态实体需要在创建后应用datepicker。要做到这一点，我会在

的某处使用点击功能

HTML

<!-- Note the id added here -->
<button data-bind="click:$root.CustomisatioAdd" id="addForm" >add </button>


<script>
    $(document).on('click', '#addForm', function(){
        $('[id$="txtEffective"]').datepicker();
    }); 
</script>

Answer 2

我发现这样做的最好方法是创建一个简单的bindingHandler。

这是根据我在本地编写的代码改编的，你可能需要调整它......

** code removed, see below **

然后更新您的模板：

** code removed, see below **

通过使用bindingHandler，您不需要在以后尝试将其连接起来，当它进行数据绑定时，它可以通过敲除来完成。

希望这有用。

修改

我创造了一个小提琴，因为我确实需要调整日期选择器绑定很多。这是指向Fiddle的链接，此处包含一些注释的代码。首先，HTML：

<form id="employeeForm" name="employeeForm" method="POST"> <script id="PhoneTemplate" type="text/html"> <div> <span> <label>Country Code:</label> <input type="text" data-bind="value: countryCode" /> </span> <span><br/> <label>Date:</label> <input type="text" data-bind="datepicker: date" /> </span> <span> <label>Phone Number:</label> <input type="text" data-bind="value: phoneNumber" /> </span> <input type="button" value="Remove" data-bind="click: $parent.remove" /> </div> </script> <div> <h2>Employee Phone Number</h2> <div data-bind="template:{name:'PhoneTemplate', foreach:PhoneList}"> </div> <div> <input type="button" value="Add Another" data-bind="click: add" /> </div> </div> </form>

注意我从模板中删除了id = ...因为您的模板会按电话号码重复，而且ID必须唯一才有意义。此外，我从国家/地区代码和电话号码元素中删除了datepicker：binding，并将其仅添加到日期字段中。此外 - 语法更改为＆＃34; datepicker：＆＃34;。如果您需要指定日期选择器选项，您可以这样做：

<input type="text" data-bind="datepicker: myObservable, datepickerOptions: { optionName: optionValue }" />

optionName和optionValue来自datepicker的jQueryUI文档。

现在为代码和一些注意事项：

// Adapted from this answer: // https://stackoverflow.com/a/6613255/1634810 ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().datepickerOptions || {}, observable = valueAccessor(), $el = $(element); // Adapted from this answer: // https://stackoverflow.com/a/8147201/1634810 options.onSelect = function () { if (ko.isObservable(observable)) { observable($el.datepicker('getDate')); } }; $el.datepicker(options); // set the initial value var value = ko.unwrap(valueAccessor()); if (value) { $el.datepicker("setDate", value); } //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $el.datepicker("destroy"); }); }, update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()), $el = $(element); //handle date data coming via json from Microsoft if (String(value).indexOf('/Date(') === 0) { value = new Date(parseInt(value.replace(/\/Date$(.*?)$\//gi, "$1"))); } var current = $el.datepicker("getDate"); if (value - current !== 0) { $el.datepicker("setDate", value); } } }; function Phone() { var self = this; self.countryCode = ko.observable(''); self.date = ko.observable(''); self.phoneNumber = ko.observable(''); } function PhoneViewModel() { var self = this; self.PhoneList = ko.observableArray([new Phone()]); self.remove = function () { self.PhoneList.remove(this); }; self.add = function () { self.PhoneList.push(new Phone()); }; } var phoneModel = new PhoneViewModel(); ko.applyBindings(phoneModel);

请注意最新更新的绑定处理程序，该处理程序从this answer改编为绑定，而this answer则用于处理onSelect。

我还在countryCode对象中添加了date，phoneNumber和Phone()个可观察对象，并将您的模型转换为全局变量phoneModel。在调试器窗口（Chrome中的F12）中，您可以键入以下内容：

phoneModel.PhoneList()[0].date()

这将显示日期的当前值。

我注意到您的form已设置为发布到某处。我建议您将click处理程序添加到＆＃34;提交＆＃34;按钮并使用ajax发布phoneModel的值。

希望这个编辑有所帮助。

DatePicker没有绑定到文本框？提供小提琴

2 个答案:

HTML