- (目前这只在Chrome中有效,因为大多数浏览器还没有为输入type=“date”实现日期选择器)*
在下面的示例中,MyDate开始时是一个Date对象,包含当前日期,但日期输入(预期其格式为YYYY/MM/DD格式的字符串)没有获取该日期。
在选取器中选取日期后,MyDate将变为上述格式的字符串。
如何绑定它以使MyDate保持javascript Date并由输入控件正确解释?
请参阅请参阅http://jsfiddle.net/LLkC4/3/:-
<input data-bind="value : MyDate" type="date">
<hr>
<span data-bind="html: log" />
<script>
var viewModel = {
MyDate : ko.observable(new Date()),
log : ko.observable(""),
logDate : function () {
this.log(this.log() + this.MyDate() + " : " +
typeof(this.MyDate()) + "<br>");
}
};
viewModel.MyDate.subscribe(function (date) {
viewModel.logDate();
});
ko.applyBindings(viewModel);
viewModel.logDate()
</script>
9条答案
按热度按时间wsewodh21#
虽然@amakhrov答案将工作(甚至会更好,如果使用可写的计算可观察像sujested由@Stijn),我决定这样做使用Custom Bindings。
这样做的主要优点是可重用性-只要我想绑定它,我就必须使用
data-bind="datePicker : MyDate"
。我还可以修改input元素的其他属性,所以如果绑定到复杂的jQuery(和其他)控件,这可能会非常有用。HTML语言
JS系统
请参阅http://jsfiddle.net/LLkC4/5/
velaa5lx2#
您可以在模型中为日期对象使用计算变量:
在html中:
在代码中:
请观看演示:http://jsfiddle.net/gcAXB/1/
tkclm6bt3#
这里有一个解决方案,是为我工作的最新knockoutjs,基于以下链接,并修改了一个自定义init函数,以处理更新ko.computed属性,因为您的日期值的变化。
请注意,utils.formatDate只是一个实用程序函数,用于将日期格式化为您想要的任何字符串,因此,无论您使用momentjs还是其他方法,都只需将其替换为您自己的日期格式化代码即可。
BINDING AND FORMATTING DATES USING KNOCKOUT AND MOMENT JS
rfbsl7qr4#
现在有了Moment.js就轻松多了
在html中,您可以将它与
并将其格式显示为
不需要创建自定义绑定,并且可以为旧版浏览器使用shim。
1dkrff035#
与this custom binding相同,但使用momentJS:
ipakzgxi6#
根据Ryan上面的回答,这在更新的ko/chrome小部件上效果更好,它还去掉了日期的时间部分。
u4vypkhs7#
从HTML 5 - Input type date formatting on iOS开始
有两种格式可供选择:
您不能更改显示格式。由浏览器决定如何向用户显示日期(实际上由系统的区域设置决定)。
您也不能更改内部格式。无论浏览器/区域设置如何,它始终是ISO 8601。
你必须用特定的格式预先填充它,你可以添加一个计算的可观察对象,把它解析成一个
Date
对象,这样你就可以在应用程序的其他地方读取它。如果您还想从JS写入它,您可以设置一个writeable computed observable并解析输入,看看它是来自输入字段的字符串,还是来自JS的
Date
对象。slsn1g298#
这对我很有效
};
ioekq8ef9#
这可能有点晚了,但它可能会帮助一些人。我正在使用Luxon的
DateTime
对象来轻松管理我的应用程序中的日期和时区。这适用于DateTime对象:用法: