Question

我想从输入字段中用逗号分隔的日期字符串中删除任何日期。

我可以删除上一个日期，但如果我想删除中间位置的任何日期，该怎么办？例如
从输入字段中删除最后一个日期，它正常工作现在尝试删除输入字段中的第一，第二，第三个日期，它不起作用。
jQuery ui css文件的外部链接

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

输入字段

<input type="text" style="width:100%" id="dates" value="2016-11-16,2016-11-17,2016-11-18,2016-11-19,2016-11-26
">

js文件的外部链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

使用js代码

<script>
jQuery(document).ready(function($) {
    // Input field selector on key up event
    $('#dates').keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        // Split string into array
      var datesString=$(this).val().split(",");
      // Create Empty Array
       dates=[];
       // Remove last element from array
      for(var i=0 ; i<datesString.length-1;i++){
       dates.push(datesString[i]);
      }
      // Set dates In input field
       $(this).val(dates);
       // after adding dates in input field add focus
       $(this).focus();

    }
    });
});
</script>

中的工作示例 jsfiddle

jsfiddle full working functionality

Answer 1

实现此目标的一种更简单的方法是split()字段中,字符blur，focus和change上的字符串，以及删除除数组的第一项之外的所有项，如下所示：

＆＃13;

$('#dates').on('focus blur change', function(e) {
  $(this).val(function(i, v) {
    return v.split(',')[0].trim();
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="width:100%" id="dates" value="2016-11-16,2016-11-17,2016-11-18,2016-11-19,2016-11-26">

＆＃13;

更新

鉴于您的fiddle example，您需要删除onSelect()逻辑，因为这会将所有选定的日期推送到数组并在输入中显示组合：

$(this).datepicker({
    dateFormat: "yy-mm-dd",
    showAnim: 'slide',
    minDate: 0
})

Answer 2

如果我理解正确，你想从中间的输入日期中删除光标位置？

在那种情况下，普通输入是不好的选择。人们不会知道在输入中逗号之前或之后是否单击退格。

在这种情况下，像Tag-it这样的插件可以发挥最佳效果。

@Edit ---

我不知道为什么我为你做了，但在这里你重现了。 https://jsfiddle.net/fd1034rn/5/

我只需要几行代码。

$(document).ready(function() {
        $("#myTags").tagit({
            fieldName: "date",
            singleField: true
        });

        $('#myTags input:eq(0)').datetimepicker();

        //tests
        setInterval(function(){
            $("#val").text($('#myTags').tagit('assignedTags'));
        },200);
 });

它差不多完成了，你必须稍微改进一下。

如何删除输入字段中逗号分隔的任何日期

2 个答案: