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＃DateTime对象转换为JavaScript Date对象。在JS中，您可以通过传入自1970年1月1日以来的毫秒数来创建Date对象（新的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

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

1 个答案: