Question

我之前问过question。我已经取得了一些进展但遇到了问题。我试图创建一个可重用的函数来操纵用户输入的日期，并以不同的格式将日期返回到隐藏字段中。我的实现对于第一个日期字段正常工作，但是它也将相同的值返回到具有相同类名的其他隐藏字段中？

$.fn.convertDate = function() {

    var dateIn      = $('input.datedisplay').val().split('/');
    var dateOut     = dateIn[2] + '-' + dateIn[1] + '-' + dateIn[0]

    if (dateIn != '') {
        $(this).closest('div.row').find('input.dateselect').val(dateOut);
    }
};


$(document).on('change', function() {
   $('input.datedisplay').convertDate();
});


<div class="row collapse">
  <label>Date label</label>
  <div class="small-3 large-2 columns">
    <span class="prefix"><%= icon('fa fa-calendar-o') %></span>
  </div>
  <div class="small-9 large-10 columns">
    <input class="datedisplay fdatepickernew" type="text" value="">
    <input class="dateselect" type="hidden" value="">
  </div>
</div>

<div class="row collapse">
  <label>Date label</label>
  <div class="small-3 large-2 columns">
    <span class="prefix"><%= icon('fa fa-calendar-o') %></span>
  </div>
  <div class="small-9 large-10 columns">
    <input class="datedisplay fdatepickernew" type="text" value="">
    <input class="dateselect" type="hidden" value="">
  </div>
</div>

Answer 1

如果插件由this本身初始化，则需要使用input.datedisplay，

var dateIn  = $(this).val().split('/');

否则，它会为您当前的目标元素提供正确的日期。

另外，你应该检查数组的长度，如

if (dateIn.length) {// as is an array not a string

$.fn.convertDate = function () {
    var dateIn = $(this).val().split('/');
    var dateOut = dateIn[2] + '-' + dateIn[1] + '-' + dateIn[0];
    if (dateIn != '') {
        $(this).closest('div.row').find('input.dateselect').val(dateOut);
    }
};
$(document).ready(function () {
    $('input.datedisplay').on('change', function () {
        $(this).convertDate()
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row collapse">
    <label>Date label</label>
    <div class="small-9 large-10 columns">
        <input class="datedisplay fdatepickernew" type="text" value=""/>
            <input class="dateselect" type="text" value=""/>
    </div>
</div>
<div class="row collapse">
    <label>Date label</label>
    <div class="small-9 large-10 columns">
        <input class="datedisplay fdatepickernew" type="text" value=""/>
        <input class="dateselect" type="text" value=""/>
    </div>
</div>

Answer 2

更改此行：

var dateIn = $('input.datedisplay').val().split('/');

到

var dateIn = $(this).closest('div.row').find('input.datedisplay').val().split('/');

可重用的jQuery日期操纵器功能

2 个答案: