我使用jQuery datepicker为多个输入字段创建了多个日期选择。
Jquery ui的外部链接
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
多个日期选择输入字段
<input type="text" class="dates_opted dates_opted_1">
<br><br>
<input type="text" class="dates_opted dates_opted_2">
jQuery和jQuery ui Js文件cdn链接
<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>
function cleanArray(actual) {
var newArray = new Array();
for (var i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
}
}
return newArray;
}
jQuery(document).ready(function($) {
$('.dates_opted').each(function(index){
var dates=[];
$(this).datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
dates=cleanArray(dates);
dates.push($(this).val());
//console.log(dates);
$(this).val(dates);
},showAnim :'slide',
minDate: 0
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
var datesString=$(this).val().split(",");
dates=[];
for(var i=0 ; i<datesString.length-1;i++){
dates.push(datesString[i]);
}
$(this).focus();
$(this).blur();
$(this).val(dates);
}
});
});
});
</script>
Here is
jsfiddle
答案 0 :(得分:0)
function(e)
{
if(e.keyCode == 8 || e.keyCode == 46)
{
var datesString=$(this).val().split(",");
dates=[];
获取游标位置并找到需要删除的日期索引
cix=$(this).selectionStart;
ix=Math.floor(cix/9);
运行所有数组并在新数组中跳过该值
for(var i=0 ; i<datesString.length;i++)
{
if(i!=ix)
{
dates.push(datesString[i]);
}
}
$(this).focus();
$(this).blur();
$(this).val(dates);
}