我正在自定义一个jquery ui datepicker,以便在关注相关输入字段时显示,并在鼠标光标离开包含输入字段和日期选择器的整个div时隐藏(fromSelector
/ {{1} })。
我遇到的问题是mouseout事件,当光标离开toSelector
或#to
输入字段时触发,而不是当我离开整个div时
在我的html和js文件中,我有:
index.html.erb
#from
* chart_initialize.js *
<div class="six columns" id = "fromSelector">
From
<%= text_field_tag :from, @from.strftime('%d/%m/%Y') %>
<div id="fromDiv"></div>
</div>
<div class="six columns end" id = "toSelector">
To
<%= text_field_tag :to, @to.strftime('%d/%m/%Y') %>
<div id="toDiv"></div>
</div>
<div class="twelve columns end">
<%= submit_tag 'Calculate', :class => 'secondary button', :id => 'submitDate' %>
</div>
(rails initializeDatepicker: function () {
$( "#fromDiv" ).datepicker({
yearRange: "-5:+0",
altFormat: 'dd/mm/yy',
altField: '#from',
changeMonth: true,
changeYear: true
});
$( "#toDiv" ).datepicker({
yearRange: '-5:+0',
altFormat: 'dd/mm/yy',
altField: '#to',
changeMonth: true,
changeYear: true
});
$('#from').on('focus', function () {
$('#fromDiv').slideDown(300);
});
$('#fromSelector').on('mouseout', function () {
$('#fromDiv').slideUp(300);
});
$('#to').on('focus', function () {
$('#toDiv').slideDown(300);
});
$('#toSelector').on('mouseout', function () {
alert("test");
$('#toDiv').slideUp(300);
});
},
助手创建名称和id为'from'/'to'的输入。
任何帮助表示赞赏!