javascript - 可重用的 jQuery 日期操纵器函数

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

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

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>