Full month names in English

[wojciktomasz]

On most of your screens you have full month's names in English (e.g. 'August', 'October'), while the default display for the calendar window is a short version on of the month's name (e.g. 'Aug', 'Oct').

I would like to display a full name of the month on my calendar, but I could not find a way to do that. Could you help me out?

Thanks!

[benjycui]

You need to update locale now.

[wojciktomasz]

Ok, thanks for the hint. Is there a chance you could tell me what value I should set it up to?

In none of the example calendars provided it is set up that way that I want it, so I pretty much have a problem with it.

Thanks for help!

[wojciktomasz]

I actually updated the locale (just for testing) to Spanish, and it doesnt really fix my problem though. On the screenshot you can see I have "Today" translated into "Hoy", so the locale translation works just fine, but my month name still remains in English and is just 3 letters long ('Oct').

Thats my actual setting for the calendar:

<Calendar
            className='input-date-picker__date-picker'
            showWeekNumber={false}
            defaultValue={this.state.selectedDate}
            showToday
            showOk={false}
            disabledDate={this.disabledDate}
            onSelect={this.changeDate}
            locale={esES}
          />

What I really want to do is to display a full name for each month in English (e.g. October), so setting the locale to Spanish was just for testing.

Can you help me out? Thanks!

[benjycui]

Please provide a re-producible demo: http://codepen.io/benjycui/pen/jBbdLZ?editors=0010

You should set moment locale at the same time.

[EscoCreeks]

Hello @wojciktomasz, I think that the #315 would fix your issue. Can you test it ?

[JonasJonny]

@wojciktomasz Did you found solution? @EscoCreeks, @benjycui Any workaround?

Actually monthFormat does not work... at least at DVAjs.

[EscoCreeks]

@JonasJonny What version are you using ? monthFormat was released around the 9.6.2 version. If you are up-to-date, you can try and send a snippet of how you are initializing your components.

[JonasJonny]

@EscoCreeks DVA.js https://ant.design/components/date-picker/ with [email protected].

import cs_CZ from 'antd/node_modules/rc-calendar/lib/locale/cs_CZ';
const locale = { ...cs_CZ, monthFormat: 'MMMM' }

console.log('print locale', locale);
// print locale: {
    ...
    monthBeforeYear: true
    monthFormat: "MMMM"
    ...
}

<DatePicker.MonthPicker
    allowClear={false}
    placeholder="abc"
    format="MM / YYYY"
    locale={locale}
    defaultValue={selectedMonth}
    style={{ minWidth: '175px', maxWidth: '250px' }}
    getCalendarContainer={triggerNode => triggerNode.parentNode}
    size="small"
    onChange={this.handleOnChangeMonth}
/>

https://imgur.com/XMh9QhL

[JonasJonny]

I found workaround.

monthCellContentRender={value => value.format('MMMM')}

v v v

<DatePicker.MonthPicker
  format="MM / YYYY"
  defaultValue={selectedMonth}
  monthCellContentRender={value => value.format('MMMM')}
  onChange={this.handleOnChangeMonth}
/>

value is "2018-01-05T10:13:09.269Z" so after format is everything fine!

(Maybe whole problem is just inside DVAjs)

[shyam528]

It shows only selected header complete month name but not all the months, if I want to show all the month name in capital, how can I achieve that

[kilianc]

ref #625 same problem as @shyam528

[bishnu476]

changing locale.dateFormat will do the job

const locale = {
  "lang": {
    "locale": "en_US",
    "placeholder": "Select date",
    "rangePlaceholder": ["Start date", "End date"],
    "today": "Today",
    "now": "Now",
    "backToToday": "Back to today",
    "ok": "Ok",
    "clear": "Clear",
    "month": "Month",
    "year": "Year",
    "timeSelect": "Select time",
    "dateSelect": "Select date",
    "monthSelect": "Choose a month",
    "yearSelect": "Choose a year",
    "decadeSelect": "Choose a decade",
    "yearFormat": "YYYY",
    "dateFormat": "M/D/YYYY",
    "dayFormat": "D",
    "dateTimeFormat": "M/D/YYYY HH:mm:ss",
    "monthFormat": "MMMM",
    "monthBeforeYear": true,
    "previousMonth": "Previous month (PageUp)",
    "nextMonth": "Next month (PageDown)",
    "previousYear": "Last year (Control + left)",
    "nextYear": "Next year (Control + right)",
    "previousDecade": "Last decade",
    "nextDecade": "Next decade",
    "previousCentury": "Last century",
    "nextCentury": "Next century"
  },
  "timePickerLocale": {
    "placeholder": "Select time"
  },
  "dateFormat": "YYYY-MMMM-DD", //change month format to MMMM from MM
  "dateTimeFormat": "YYYY-MM-DD HH:mm:ss",
  "weekFormat": "YYYY-wo",
  "monthFormat": "YYYY-MM"
};

    <DatePicker
      locale={locale}
    />

I guess this works perfectly for full month display

[kilianc]

Doesn't https://github.com/react-component/calendar/pull/626 fix this issue?