当日期为空时，如何在日期输入字段中显示“mm/dd/yyyy”而不是“12/31/1969”?

Essentially I have a column in my database that is of date type but can be null. I have a form using Angular/Bootstrap that allows users to enter a date if they wish but they do not have to, for this I use Bootstraps form-control class and give the input a type of date.

实际上，我的数据库中有一个列是日期类型的，但可以是null。我有一个使用角/自举的表单，允许用户输入日期(如果他们愿意的话)，但他们不需要输入日期，为此我使用Bootstrap表单控件类，并给输入一个日期类型。

Everything works saving the first time when the form is loaded with a null value for the date. The database saves it fine and all is good. However when I load a record into this form if the database shows a null value Angular/Javascript is displaying it as 12/31/1969 instead of "mm/dd/yyyy" as it does when it is initially loaded with null values. This causes an issue because if the user saves this form it takes the default 12/31/1969 as a real date and saves that as input.

所有操作都可以在第一次加载表格时节省时间。数据库保存得很好，一切都很好。然而，当我将一条记录加载到这个表单中时，如果数据库显示了一个空值，那么它将显示为12/31/1969，而不是“mm/dd/ yyyyy”，就像最初加载空值时一样。这导致了一个问题，因为如果用户保存了这个表单，它将默认的12/31/1969作为一个真实的日期，并将其保存为输入。

I have tracked it through the console and I am 100% positive the date value is null () when it hits my model binding so I can't think of what to do in this scenario, I would really appreciate any pointers.

我通过控制台跟踪了它，我100%肯定，当它到达我的模型绑定时，日期值为null()，所以我不知道在这个场景中该做什么，我真的很感激任何指针。

On pulling the data:

在把数据:

if (myDateFromDatabase !== null) { 
    myDateFromDatabase = new Date(myDateFromDatabase); 
}

In view:

在视图:

<input ng-model="myDateFromDatabase" type="date" class="form-control" />

2 个解决方案

#1

Angular needs to have any input[date] be a valid javascript Date object, otherwise it will default to an empty string, which will then default to 12/31/1969. Javascript Date objects must always have a valid Date.

需要让任何输入[date]都是有效的javascript日期对象，否则它将默认为空字符串，然后默认为12/31/1969。Javascript日期对象必须始终具有有效的日期。

If you want to be able to use a nullable Date object, you should set the default property to undefined and then when you bind your model, you can see if it's null first, and do nothing if it is.

如果您想要使用一个nullable Date对象，您应该将默认属性设置为undefined，然后当您绑定模型时，您可以先查看它是否为null，如果为空，则不做任何操作。

var myDateFromDatabase = undefined; // if you get null back from database, you'll keep this undefined

Then when you fetch your data and apply it...

然后当你取回你的数据并应用它时…

if (data.dateRetrieved !== null) { 
    // only make myDateFromDatabase an actual date if there is something stored
    myDateFromDatabase = new Date(data.dateRetrieved); 
}

And for your default text, add the placeholder attribute:

对于默认文本，添加占位符属性:

<input ng-model="myDateFromDatabase" type="date" placeholder="mm/dd/yyyy" class="form-control" />

#2

-1

Like isherwood said, this question is harder to answer without some code context. I'll update my question if some is added.

正如伊舍伍德所说，如果没有代码上下文，这个问题很难回答。如果增加了一些问题，我将更新我的问题。

Somewhere in your code you must be formatting the date. If the javascript is formatting it from a date object, then you simply need to do something like:

在代码的某个地方，您必须格式化日期。如果javascript正在从一个日期对象格式化它，那么您只需执行以下操作:

if(some_date === null)
    some_date = 'mm/dd/yy;
else {
    //date formatting code
}

If your php or query formatting the date for you then if you were doing this for example on the frontend:

如果你的php或查询格式化日期如果你这样做例如在前端:

<input ng-attr-value="{{obj.date}}"/>

Then change that to:

然后改变:

<input ng-attr-value="{{obj.date === null ? 'mm/dd/yyyy' : obj.date}}"/>

Or alternatively do something similar when you've received the data back from the api.

或者，当您从api接收到数据时，也可以做类似的事情。

Edit/note: You may have trouble with this method in angular 1.3+ if it's a date input field.

编辑/注意:如果是一个日期输入字段，在角度1.3+的情况下，您可能会遇到问题。

#1