Skip to content

Setting initialVisibleMonth #48

@AaronMcCloskey

Description

@AaronMcCloskey

@datepicker-react/hooks or @datepicker-react/styled version
@datepicker-react/styled@2.3.0

Describe the bug
Unsure what values need to be passed to initialVisibleMonth so the initial month is not current month?

Source code (including props configuration)
Steps to reproduce the behavior:

 const createDate = (days, months, years) => {
    var date = new Date();
    date.setDate(date.getDate() + days);
    date.setMonth(date.getMonth() + months);
    date.setFullYear(date.getFullYear() + years);
    return date;
  };

<DateSingleInput
        onFocusChange={focusedInput => setShowDatepicker(focusedInput)}
        showDatepicker={showDatepicker}
        onDateChange={val => (val && val.date ? setDateField(val.date) : null)}
        date={dateField}
        displayFormat={"dd/MM/yyyy"}
        // initialVisibleMonth={[
        //   {
        //     year: 1991,
        //     month: 11,
        //     date: "Wed Nov 27 1991 11:51:41 GMT+0000 (Greenwich Mean Time)"
        //   }
        // ]}
        // initialVisibleMonth={() => [
        //   {
        //     year: 1991,
        //     month: 11,
        //      date: "Wed Nov 27 1991 11:51:41 GMT+0000 (Greenwich Mean Time)"
        //   }
        // ]}
        // initialVisibleMonth={{
        //   year: 1991,
        //   month: 11,
        //   date: "Wed Nov 27 1991 11:51:41 GMT+0000 (Greenwich Mean Time)"
        // }}
        // initialVisibleMonth={11}
        // initialVisibleMonth={(1991, 11, "1991-03-11")}
        // initialVisibleMonth={[1991, 11, "1991-03-11"]}
        // initialVisibleMonth={[11]}
        // initialVisibleMonth={[1991]}
        // initialVisibleMonth={() => 11}
        // initialVisibleMonth={() => (1991, 11, "1991-03-11")}
        // initialVisibleMonth={() => [1991, 11, "1991-03-11"]}
        // initialVisibleMonth={() => [11]}
        // initialVisibleMonth={() => [1991]}
        // initialVisibleMonth={() => moment().add(10, "months")}
        // initialVisibleMonth={() => moment().add(10, "months")._d}
        // initialVisibleMonth={moment().add(10, "months")}
        // initialVisibleMonth={moment().add(10, "months")._d}
        // initialVisibleMonth={
        //   "Sun Feb 07 2021 11:51:41 GMT+0000 (Greenwich Mean Time)"
        // }
        // initialVisibleMonth={() =>
        //   "Sun Feb 07 2021 11:51:41 GMT+0000 (Greenwich Mean Time)"
        // }
        // initialVisibleMonth={createDate(1, 1, 1)}
        // initialVisibleMonth={[createDate(1, 1, 1)]}
      />

If you have custom methods that you are passing into a @datepicker-react component / hooks, please include the source for those as well.

Desktop (please complete the following information):

  • OS: iOS
  • Browser: chrome
  • Version: 79

Additional context
From the above Source code you can see all the different type of values I've added to initialVisibleMonth but when I open the calendar, it's still this month. What is the specific value I would need to pass to get next month for example?

CodeSandBox
https://codesandbox.io/s/cool-datepicker-datepicker-reactstyled-b0hr3

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions