使用 angular 飞镖将日期绑定到 inpubtbox

Question

我正在构建一个网络应用程序，其中包含带有日期的输入框。如何将数据绑定到我的后台代码？我试过直接这样做，但我猜输入框只能处理字符串，所以制作了一个转换为字符串的方法等等。

<div>
    <label>start date: </label>
    <input [(ngModel)]="item.stringStartDate" placeholder="start date" type="date">
</div>


void set startDate(DateTime startDate)
{
    _startDate = startDate;
}

void set stringStartDate(String startDate)
{
    this.startDate = parseDate(startDate);
}


static DateTime parseDate(String formattedString)
{
    final RegExp r = new RegExp(
        r'^(\d\d)-?(\d\d)-?([+-]?\d{4,6})');

    Match match = r.firstMatch(formattedString);
    if (match != null)
    {
        int years = int.parse(match[3]);
        int month = int.parse(match[2]);
        int day = int.parse(match[1]);

        return new DateTime(years, month, day);
    }
    else
    {
        throw new FormatException("Invalid date format", formattedString);
    }
}

static String dateToString(DateTime date){
    if (date == null)
        return null;

    String ret = "${date.year}/";

    if (date.month < 10)
        ret+="0";
    ret+="${date.month}/";

    if (date.day < 10)
        ret += "0";
    ret+="${date.day}";

    return ret;
}

Answer 1

应该用-分隔而不是/

您可以使用 toIso8601String 和 substring

DateTime _date = new DateTime.now();

String get date => _date.toIso8601String().substring(0, 10);

void set date(value) {
  if (value is DateTime) {
    _date = value;
  } else if (value is String) {
    _date = DateTime.parse(value);
  }
}

使用 angular 飞镖将日期绑定到 inpubtbox

bind date to inpubtbox with angular dart

html

inputbox

angular-dart