当日期为空时，如何在日期输入字段中显示设置为“mm/dd/yyyy”而不是“1/1/0001”的占位符？

Posted 2023-05-07

【中文标题】当日期为空时，如何在日期输入字段中显示设置为“mm/dd/yyyy”而不是“1/1/0001”的占位符？

【英文标题】：How do you display placeholder which is set as 'mm/dd/yyyy' instead of “1/1/0001” in date input fields when date is null?

【发布时间】：2019-12-21 08:48:20

【问题描述】：

我的数据库中有一个datetime 类型的列，它可能为空，也可能不为空。前端表单应显示数据库中的日期（如果有），如果为空，则应显示mm/dd/yyyy 而不是1/1/0001，当数据库中有空值时它会显示。所以基本上如果数据库中有一个日期，它应该显示日期，如果它为空，它应该返回带有“mm/dd/yyyy”或“选择日期”的默认日期选择器。

我的 js 文件看起来像：

    $scope.Changes = function (product, value)     
        var input =
            
                ProductId: product.ProductId,
                isActive: value,
                graceEndDate: product.graceEndDate
            

        AdService.updateProducts(input).then(function (response) 
            if (response && response.data && response.data.isSuccessful === true) 
                DealService.showSuccess('Update successful');
             else 
                DealService.showError('error');
            
            product.isUpdating = false;
            $scope.loadProducts();
        , function (error) 
            product.isUpdating = false;
            $scope.loadProducts();
            DealService.showError(error);
        );    
    
;

---

我的 html 如下所示：

<td ng-if="product.isActive === true">
  <quick-datepicker type="date" style="max-width: 175px"
                    placeholder="mm/dd/yyyy" 
                    ng-model="product.EndDate"
                    disable-timepicker="true"
                    ng-change="saveChanges(product, true)">
  </quick-datepicker> 
</td>

【问题讨论】：

设置placeholder attribute?

您应该使用名为 placeholder 的 html 属性：w3schools.com/tags/att_input_placeholder.asp

我的 HTML 看起来像这样：

【参考方案1】：

我不认为你的问题是占位符。我敢打赌，您的前端接收的数据已将 product.EndDate 设置为 1/1/0001，因为 DateTime 类型设置为 null 时的默认值。

根据您的后端语言，您可以将类型设置为 可为空 来解决此问题

【讨论】：

在数据库条目不为空的情况下，它也会接收其他日期。如果数据库条目为空，则返回 1/1/0001，我希望将其替换为空白日期，例如“mm/dd/yyyy”

你是说当值不为空时它接收到错误的日期？

对。例如，在 C# 中，您可以将类型设置为 DateTime?，这允许它在为空时为空，并在不为空时设置正确的值。

另一种选择是使用string 而不是DateTime/DateTime?

如果数据库条目为空，我希望日期选择器显示占位符值

【参考方案2】：

如果您使用 nqQuickDate 库，您可以轻松地使用 placeHolder 属性来处理空值。 但是请仔细检查您从 API 获取的 null 值是否格式正确，有时 null 值以字符串 null 的形式出现，例如：date:'null'

【讨论】：

我正在使用 ngQuickDate，但是当日期为空时，它仍然在前端表单中返回 1/1/0001。