gpt4 book ai didi

jquery - 铆钉JS : Update model with jQuery-ui Datepicker

转载 作者:行者123 更新时间:2023-12-01 04:43:06 25 4
gpt4 key购买 nike

我是 的新用户我喜欢它!当 AngularJS 等其他完整框架太重时,在微型网站或小代码片段中非常有用。

我可以让它在所有情况下工作,除非输入值通过 jQuery 插件(在这种特殊情况下是日期选择器)更改。

rivets.configure({ prefix: "data-rv", templateDelimiters: ['{{', '}}'] });
var $data = {CDP:null};

rivets.bind($("#toBind"), { data: $data });

function Datepicker(selector, context) {
//
$(selector, context).datepicker().keyup(function (e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
})
}

$data.CDP = {LastDeliveryDate: "01/01/2015"};

Datepicker(".date");
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<div id="toBind">
<input type="text" class="form-control date" id="txtDeliveryDate" placeholder="dd/mm/yyyy" data-rv-value="data.CDP.LastDeliveryDate">
<span id="showText">{{data.CDP.LastDeliveryDate}}</span>
</div>

这是 fiddle :https://jsfiddle.net/sLdvegdo/2/

如您所见,使用日期选择器选择进行值更改不会更新模型,但手动输入会更新模型。

有什么想法吗?

最佳答案

它不起作用的原因是 rv-value 绑定(bind)器通过监听 input 事件来工作(旧版本中的 change)

您可以通过手动触发事件 onSelect 来修复此问题如下图:

rivets.configure({
prefix: "data-rv",
templateDelimiters: ['{{', '}}']
});
var $data = {
CDP: null
};

rivets.bind($("#toBind"), {
data: $data
});

function Datepicker(selector, context) {
//
$(selector, context).datepicker({
onSelect: function(date) {
$(this).trigger('input');
}
}).keyup(function(e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
})
}

$data.CDP = {
LastDeliveryDate: "01/01/2015"
};

Datepicker(".date");
<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.1/rivets.bundled.min.js"></script>
<div id="toBind">
<input type="text" class="form-control date" id="txtDeliveryDate" placeholder="dd/mm/yyyy" data-rv-value="data.CDP.LastDeliveryDate">
<span id="showText">{{data.CDP.LastDeliveryDate}}</span>
</div>

关于jquery - 铆钉JS : Update model with jQuery-ui Datepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34322298/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com