kendo-ui - Kendo 可编辑网格列属性 parseFormats 未按预期工作-6ren

kendo-ui - Kendo 可编辑网格列属性 parseFormats 未按预期工作

转载作者：行者123 更新时间：2023-12-01 15:32:16

我正在尝试使用 parseformats 属性使日期列接受两种格式，但它似乎没有出现，请指教。场景:当我输入 10/10/19 时，它显示的日期消息不正确。但是当我输入 10/10/2019 时，它没有错误并以格式显示。

$(document).ready(function () {
	$("#grid").kendoGrid({
		toolbar: ["save"],
		columns: [{
				field: "name"
			},
			{
				field: "age",
				format: "{0:MM/dd/yyyy}",
				parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
			}
		],
		dataSource: {
			data: [{
					id: 1,
					name: "Jane Doe",
					age: "11/11/2019"
				},
				{
					id: 2,
					name: "John Doe",
					age: "10/10/2018"
				}
			],
			schema: {
				model: {
					id: "id",
					fields: {
						age: {
							type: "date"
						}
					}
				}
			}
		},
		editable: true
	});
});

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
       <div id="grid"></div>

</body>
</html>

最佳答案

尝试 this

    
    $(document).ready(function () {
	$("#grid").kendoGrid({
		toolbar: ["save"],
		columns: [{
				field: "name"
			},
			{
				field: "age",
				format: "{0:MM/dd/yyyy}",
				parseFormats: ["MM/dd/yyyy", "MM/dd/yy"]
			}
		],
		dataSource: {
			data: [{
					id: 1,
					name: "Jane Doe",
					age: "11/11/2019"
				},
				{
					id: 2,
					name: "John Doe",
					age: "10/10/2018"
				}
			],
			schema: {
				model: {
					id: "id",
					fields: {
						age: {
             parse: function (value) {
                var dt = kendo.parseDate(value,["MM/dd/yyyy", "MM/dd/yy"]);
                return kendo.toString(dt, "MM/dd/yyyy");   
               },
              validation: {
                 ageValidation: function (value) {
                	var dt = kendo.parseDate(value.val(),["MM/dd/yyyy", "MM/dd/yy"]);
               	  value.attr("data-ageValidation-msg", "age is not valid date")
                  return dt !== null;
              }
              }
						}
					}
				}
			}
		},
		editable: true
	});
});

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
       <div id="grid"></div>
  
</body>
</html>