如何在KendoDatePicker中设置日期显示格式为"21 Aug 2018"？

Hey there! Getting your KendoDatePicker to show dates in the 21 Aug 2018 format is straightforward—you just need to configure the right formatting options. Let’s break this down based on which Kendo UI framework you’re using:

For jQuery/Kendo UI Web #

Initialize the DatePicker with the format property set to "dd MMM yyyy"—this spec maps directly to your desired format:

• dd: Two-digit day (21)
• MMM: Abbreviated month name (Aug)
• yyyy: Four-digit year (2018)

Add the parseFormats option too, so the component can correctly recognize manual date inputs in the same format:

<input id="datepicker" />

<script>
$("#datepicker").kendoDatePicker({
    format: "dd MMM yyyy",
    parseFormats: ["dd MMM yyyy"] // Ensures manual inputs are parsed correctly
});
</script>

For Kendo UI for Angular #

Use the format input binding on the <kendo-datepicker> component, and optionally include parseFormats for manual input support:

<kendo-datepicker
    format="dd MMM yyyy"
    [parseFormats]="['dd MMM yyyy']"
></kendo-datepicker>

Note: If your app uses a non-default culture, you’ll need to import and register the corresponding culture package to ensure month abbreviations match. For English (US), the default setup works fine.

For Kendo UI for React #

Pass the format and parseFormats props to the DatePicker component:

import { DatePicker } from '@progress/kendo-react-dateinputs';

export default function App() {
    return (
        <DatePicker
            format="dd MMM yyyy"
            parseFormats={["dd MMM yyyy"]}
        />
    );
}

Quick Tip #

The MMM specifier is key here—it’s designed to render the abbreviated month name. If you ever need full month names (like "August"), you’d use MMMM instead.

内容的提问来源于stack exchange，提问作者Agil C