如何使用日期选择器进行双向数据绑定？

Question

我正在尝试使用Vuetify的日期选择器组件。我的日期来自我的C#，格式是DateTime。如何使用验证日期选择器进行双向数据绑定？

我想显示一个以前的日期，允许用户更改或不更改它。

谢谢

<v-menu ref="menu" v-model="menu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="date" lazy transition="scale-transition" offset-y full-width min-width="290px">

<template v-slot:activator="{ on }">

  <v-text-field v-model="**editedItem.activationdate**" label="Picker in menu" prepend-icon="event" readonly v-on="on"></v-text-field>

</template>

<v-date-picker v-model="**editedItem.activationdate**" no-title scrollable>

<v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
 <v-btn flat color="primary" @click="$refs.menu.save(editedItem.activationdate)">OK</v-btn>
</v-date-picker>
</v-menu>

Answer 1

您必须将C#日期时间对象转换为JavaScript日期对象。在JS中，您可以通过传入自1970年1月1日以来的毫秒数来创建一个Date对象(new Date(0)将得到1970-01-01)。要获取此号码，您可以使用如下分机：

 public static class DateTimeExtensions
 {
    private static readonly long DatetimeMinTimeTicks =
        (new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).Ticks;

    public static long ToJavaScriptMilliseconds(this DateTime dt)
    {
        return (long)((dt.ToUniversalTime().Ticks - DatetimeMinTimeTicks) / 10000);
    }
  }

例如，现在你可以在后端执行以下操作：

long numberOfMilliseconds = DateTime.Now.ToJavaScriptMilliseconds(); //C#

并将其发送到前端，这样您就可以使用JavaScript完成以下操作：

var myDate = new Date(editedItem.numberOfMilliseconds); //JavaScript