在 Jquery AJAX 调用中动态更新日期选择器中的日期

Question

我有位置文本框自动完成文本框和可用日期文本框。

当用户键入位置时，我的自动完成文本框有一个 AJAX 调用来获取匹配记录。在自动完成的 onSelect 调用中，我将获得 Id，并且我必须调用 MVC 控件的操作来获取基于该 Id 的日期。在 AvailableDates 文本框中应该附加一个日期选择器，它应该禁用所有发送我的控件操作的日期。

我怎样才能做到这一点，任何帮助将不胜感激！

谢谢。

我尝试了以下代码，但它没有禁用日期。

var Locations = [
   { value: 'Andorra', id: 'AD' },
   // ...
   { value: 'Zimbabwe', id: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: Locations,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.id);
$.ajax({
        url: '@Url.Action("getAvailableDates","booking")',
        dataType: "json",
        type: "GET",            
        cache: false,
        data: {id:suggestion.id} ,
        success: function (holidays) { 
            if (data.success) {
                alert(data.message);
                  $('#txtAvailableDates').datepicker({
                   beforeShowDay: function(date){

                  }
              });
            }
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
    }
});

MVC 控制器操作返回列表假日日期

日期文本框应填充日期，禁用假日日期。

Answer 1

这是我如何让它工作的。 我不完全确定您的控制器返回什么，但我的返回日期数组。 你的显然是在使用 id，但对于我的例子，我只是返回一个日期数组。

[Route("api/[controller]")]
[Produces("application/json")]
[ApiController]
public class BookingController : ControllerBase
{
    [HttpGet("{id}")]
    public IActionResult Get(string id)
    {
        DateTime[] holidays = new DateTime[]
            { 
                new DateTime(2019, 10, 14),
                new DateTime(2019, 11, 11),
                new DateTime(2019, 11, 28),
            };
        return Ok(holidays);
    }
    }        
}

然后在成功的 ajax 调用中，我使用 map 来获取与 datepicker 字符串匹配的日期。并使用 beforeShowDay 来禁用假期

 $.ajax({
        url: 'api/Booking/AP',
        dataType: "json",
        type: "GET",            
        cache: false,
            success: function (data) { 
               var dates = data.map(x => new Date(x).toISOString().split('T')[0]);
                console.log(dates);
                $("#datepicker").datepicker({
                     beforeShowDay: function(date){
                        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                        console.log(string);
                         return [ dates.indexOf(string) == -1 ]
                    }
                })
            },
        error: function (xhr) {
            alert(xhr.responseText);
        }
        });