Year and Month Navigator property in Calendar component

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
marcelo.t.nobre
Posts: 8
Joined: 27 Nov 2018, 00:05

14 Apr 2019, 14:43

Hello guys

I'm in trouble with Calendar component when I try to use the month and year navigator. This error shows up in the react debugger (I don't know if that is a debugger) and it looks like the Serenity doesn't support it (I hope I was wrong about it).

So is there suggestions about how to proceed?

Code: Select all

<Calendar
    className={touched.dataNascimento && errors.dataNascimento ? "ui-state-error" : null}
    id={"dataNascimento"}
    value={values.dataNascimento}
    onChange={handleChange}
    monthNavigator={true}
    yearNavigator={true}
    minDate={new Date(0, 0, 1)} 
    maxDate={new Date()}
    locale={pt_br} />
This is the error.

Code: Select all

TypeError: Cannot read property 'split' of undefined
Calendar.renderTitleYearElement
C:/Users/viny_/outerboxtech/outerboxtech-clinica-web/node_modules/primereact/components/calendar/Calendar.js:1761
  1758 | value: function renderTitleYearElement(year) {
  1759 |   if (this.props.yearNavigator) {
  1760 |     var yearOptions = [];
> 1761 |     var years = this.props.yearRange.split(':');
       | ^  1762 |     var yearStart = parseInt(years[0], 10);
  1763 |     var yearEnd = parseInt(years[1], 10);
  1764 | 
View compiled
Calendar.renderTitle
C:/Users/viny_/outerboxtech/outerboxtech-clinica-web/node_modules/primereact/components/calendar/Calendar.js:1791
  1788 | key: "renderTitle",
  1789 | value: function renderTitle(monthMetaData) {
  1790 |   var month = this.renderTitleMonthElement(monthMetaData.month);
> 1791 |   var year = this.renderTitleYearElement(monthMetaData.year);
       | ^  1792 |   return _react.default.createElement("div", {
  1793 |     className: "p-datepicker-title"
  1794 |   }, month, year);
View compiled
Calendar.renderMonth
C:/Users/viny_/outerboxtech/outerboxtech-clinica-web/node_modules/primereact/components/calendar/Calendar.js:1872
  1869 | var weekDays = this.createWeekDays();
  1870 | var backwardNavigator = index === 0 ? this.renderBackwardNavigator() : null;
  1871 | var forwardNavigator = this.props.numberOfMonths === 1 || index === this.props.numberOfMonths - 1 ? this.renderForwardNavigator() : null;
> 1872 | var title = this.renderTitle(monthMetaData);
       | ^  1873 | var dateViewGrid = this.renderDateViewGrid(monthMetaData, weekDays);
  1874 | var header = this.props.headerTemplate ? this.props.headerTemplate() : null;
  1875 | return _react.default.createElement("div", {

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

16 Apr 2019, 15:18

Hi,
You need to add yearRange prop. You can see usage and format of yearRange prop in Month and Year Navigator topic in Calendar page (http://primefaces.org/primereact/#/calendar)

marcelo.t.nobre
Posts: 8
Joined: 27 Nov 2018, 00:05

08 May 2019, 19:26

Thank you, merve7! It worked like a charm! I missed this prop (maybe I was so frustrated I got blind) just as you said.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Oct 2020, 02:12

Thanks @merve7! Issue is resolved.

Best Regards,

Post Reply

Return to “Serenity - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests