为 ngx-bootstrap DateTimePicker 获取从 C# API 到 Angular 的日期答案

【问题标题】：Get Dates from C# API to Angular for ngx-bootstrap DateTimePicker为 ngx-bootstrap DateTimePicker 获取从 C# API 到 Angular 的日期
【发布时间】：2021-03-30 02:24:05
【问题描述】：

为了使用 Angular 的 ngx-bootstrap datepicker 日历的禁用天数我在 C# 上有一个控制器

public List<DateTime> DisabledDays(int carId)
{
    var disabledDates = new List<DateTime>();
    var result = GetAll();
    var startResult = _rentalDal.GetAll().Where(x => x.CarId == carId).Select(x => x.RentDate).ToList();
    var endResult = _rentalDal.GetAll().Where(x => x.CarId == carId).Select(x => x.ReturnDate).ToList();

    for (int i = 0; i < result.Data.Count; i++)
    {
        //for (var disDate = startResult[i]; disDate <= endResult[i]; disDate = DateTime.Parse(disDate.AddDays(1).ToString("dd/MM/yyyy")))
        for (var disDate = startResult[i]; disDate <= endResult[i]; disDate = disDate.AddDays(1))
        {
            disabledDates.Add(DateTime.Parse(disDate.ToString("dd/MM/yyyy")));
            //disabledDates.Add(Convert.ToDateTime(disDate)).ToString("MM-dd-yyyy");
            //disabledDatesString.Add(dt.(ToString("d MMM YY")));
        }
    }

    return disabledDates;
}

它工作正常，但格式应该像 YYYY-MM-DD 我尝试了一些东西，但无法为需要的 Angular 提供输出。我的输出是

    "2021-01-01T00:00:00",
    "2021-01-02T00:00:00",
    "2021-01-03T00:00:00",
    "2021-01-04T00:00:00",
    "2021-01-05T00:00:00",
    "2021-01-06T00:00:00",
    "2021-01-07T00:00:00",
    "2021-01-08T00:00:00",
    "2021-01-09T00:00:00",
    "2021-01-10T00:00:00",

angulars 方法在我手动放置时有效，但是当我尝试使用函数获取它时，它会像上面那样接收数据。

    disabledDates: Date[];
    
    this.disabledDates = [
          new Date('2021-03-20'),
          new Date('2021-03-10'),
          new Date('2021-03-11'),
        ];

getDisabledDates(carId:number){
   this.rentalService.getDisabledDates(carId).subscribe(response=>{
    this.disabledDates= response
     console.log(response)
   })

有没有办法让我的日期格式像 YYYY-MM-DD 像 disabledDates 手动提要？第二个是这个新的 Date 简单地由 for 或 for 每个循环添加

【问题讨论】：

我将保留 c# 代码并更改 javascript 函数以根据需要格式化从后端接收的值。您可以在数组上使用map 函数，然后执行substring(0,10) 之类的字符串函数，或者通过解析然后重新格式化来使用日期操作。

标签： c# angular ngx-bootstrap

【解决方案1】：

由于您的startResult 和endResult 变量是List<DateTime>，那么修改后的方法肯定适合您。

因此，您不需要将 List<string> 替换为 List<DateTime> 作为方法的返回类型。

因为在您的 JSON 响应中，DateTime 和 string 都将是 string。

解决方案：

public List<string> DisabledDays(int carId)
{
    var disabledDates = new List<string>();
    var result = GetAll();
    var startResult = _rentalDal.GetAll().Where(x => x.CarId == carId).Select(x => x.RentDate).ToList();
    var endResult = _rentalDal.GetAll().Where(x => x.CarId == carId).Select(x => x.ReturnDate).ToList();

    for (int i = 0; i < result.Data.Count; i++)
    {
        for (var disDate = startResult[i]; disDate <= endResult[i]; disDate = disDate.AddDays(1))
        {
            disabledDates.Add(disDate.ToString("yyyy-MM-dd"));
        }
    }

    return disabledDates;
}

【讨论】：

没关系，但在尝试返回时 CS0029 无法将类型 'System.Collections.Generic.List' 隐式转换为 'System.Collections.Generic.List'跨度>
可能你忘记更改方法的返回类型了。
完全正确。这工作谢谢你的帮助。使用 linq select new 标记结果 startresult 和最终结果。

【解决方案2】：

我喜欢这项服务是谁转换日期。在this SO 中将日期从字符串转换为 ngbDate，与在日期对象中转换相同 - 假设您的属性是“日期”

getData(key:any)
{
     this.get(...).pipe(map((response)=>{
        response.date=new Date(response.date)
        return response;
     }
     ))
}
getList(key:any)
{
     this.get(...).pipe(map((response:any[])=>{
        response.forEach(x=>{
         x.date=new Date(x.date)
        })
        return response;
     }
     ))
}
updateData(data2)
{
    //see that in this case you make a copy of the object
    const data={...data2,date:data2.date.getFullYear()+"-"+
                  ('00'+(data2.date.getMonth()+1).slice(-2)+'-'+
                  ('00'+date.getDate()).slice(-2)
               }
    this.http.post(....,data)
}

因此，在您的组件中，您始终使用日期对象

【讨论】：