arfedulov / semantic-ui-calendar-react Goto Github PK

Custom render dates

If possible, add option to pass custom render functions to render date labels. Render function would take a date and return react element. This would allow to append a label or apply custom styling to specific dates.

BTW Excellent module

const datePickerProps = {
onDateChange: date => this.handleDateChange(date),
value : this.props.decisionDate || "",
initialDate : this.props.decisionDate || "",
};

return(
....
<SemanticDatepicker clearable={true} {...datePickerProps} />
....);

I have a scenario where I set the date in the control and submit the data. It then should reload the data (so this.props.decisionDate is null. I expected that this would re-initialise the input field back the placeholder but it's still got the text in it.

Please could you advise on how to clear out the text field ?

Thanks
Dan

TimePicker currently does not support 12 hour format, no ability to pick time as AM/PM, hours are always displayed in 0-24 format.

Is that planned?

If pop-up calendar is displayed above input field, it closes automatically if user tries to pick month by clicking on month name.

https://react-e1y1ed.stackblitz.io

<DateTimeInput
  placeholder="Date Time"
  className="example-calendar-input"
  name="dateTime"
  value={this.state.dateTime}
  iconPosition="left"
  error={true} // added
  onChange={this.handleChange} />

so I added the error={true} here but the error highlighting is not rendered.
not sure what caused this. but the class error is correctly set in the html.

Edit...

maybe it is just me, I added bunch of important to the css

.ui.input.error > input {
  background-color: #fff6f6 !important;
  border-color: #e0b4b4 !important;
  color: #9f3a38 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

and it worked.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '.live example..'
2. Click on '.on any date picker...'
3. Scroll down to '....'
4. See error => date will not be selected

@arfedulov

No one calendar is working on internet explorer 11.

I have checked even your live example on internet explorer. None of them is working on that.

Please fix it as soon as possible. this is issue in my live build.

Thanks
Gopesh

• semantic-ui-react
• semantic-ui-css (or any alternative)
• semantic-ui-calendar-react

Thanks a lot for the great work in advanced, this is the by far best calendar i've ever used.

Describe the bug
DatesRangeInput calendar is not changeable if value is preset

To Reproduce
Steps to reproduce the behavior:

1. set <DatesRangeInput value="2019/01/01 - 2019/01/25" />
2. expected range is selected in calendar when pops up
3. date range is not changeable inside calendar anymore

Expected behavior
Date range is changeable / selectable in calendar

Dependencies versions
Provide version numbers of following packages:

• [email protected]
• [email protected]
• [email protected]

Thanks a lot.

Describe the bug
When defining a maxDate and startMode='year', calendar should open with maxDate year as the last option, and all previous years available for immediate selection vs. having to click on the arrow to view the next series of years.

To Reproduce
Steps to reproduce the behavior:

1. Create a DateInput.
2. Define startMode as 'year'.
3. Define maxDate as 'moment()'

Expected behavior
Years available will only show a few options, 16/17/18 as of today, and grey out all the future options as expected due to maxDate, but instead should open with 18' as the last year with all previous years as options.

Screenshots
https://www.dropbox.com/s/fc6ooev4o268sxn/Screenshot%202018-12-03%2014.49.04.png?dl=0

Dependencies versions
Provide version numbers of following packages:

• semantic-ui-react - 0.83.0
• semantic-ui-css (or any alternative) N/A
• semantic-ui-calendar-react - 0.12.1

Thank you for your hard work!!!

I think disabled prop will be very helpful!

Does the TimeInput component has a range for time selection. For example, I want to enable time between 11:00 to 15:00. All values apart from that should be disabled.

Describe the bug
A clear and concise description of what the bug is.

when i was planning to use this picker , i found 2 issues in it.

1. When i go to the year picker by key navigation , year should be opened and on press tab/move to next element by key navigation , it should be closed.

2. when i select '2050' year and close it , again i open it , should be there 2050 range years with selected year.

so @arfedulov can you pls give me solution on these issues ?

how to fix them ?

Thanks
Gopesh

Describe the bug
The calendar popup is always rendered at upper-right of the screen, instead of being correctly tethered to its trigger element. It appears that the inline styles which are supposed to be on the Popup are not applied, and thus it never receives its absolute x/y pixel offset.

The popup arrow/'caret' is also mispositioned.

To Reproduce
Steps to reproduce the behavior:

1. Install semantic-ui-calendar-react.
2. Add a DateInput as per the docs.
3. Click the input in your app.

Expected behavior
The calendar popup to be tethered correctly to its <DateInput> trigger.

Screenshots
with v0.13.0, you can see the issue:

with v0.12.2 there is no problem:

Dependencies versions
v0.13.0

• semantic-ui-react - 0.81.1
• semantic-ui-css (or any alternative)
• semantic-ui-calendar-react

Describe the bug
In DateInput, when maxDate is in a previous month, when you click the component the calendar pops up and it is on the current month, with all days disabled, which is not very useful.

To Reproduce
Steps to reproduce the behavior:

1. Create a DateInput with maxDate set to a month ago.
2. Render it, and click it to open the selection calandar.

Expected behavior
The selection day should initially go to the month of maxDate.

Screenshots

Dependencies versions

• semantic-ui-calendar-react: latest.

Sorry for the dumb question, but how can we close the widget on date select event, as it does for default non semantic-ui widgets (e.g. Firefox's <input type='date'>)?

Hi,

I am using semantic-ui-react with styles from semantic-ui-less including the provided calendar.css. However there is a max width on the popup element within semantic-ui-less causing issues.

The following screenshot shows the current DateInput popup:

When I remove the max width by applying

.ui.popup.suir-calendar {
  max-width: none;
}

the calendar fits into the popup, but it causes positioning issues, as can be seen in this screenshot

Is it better to remove the max-width from the popup element or to reduce the width of the calendar?

Thanks for your effort on this project & best regards
Christian

Having optional week numbers visible in month-view would be quite handy.

Excellent work, really like this module!

Hi,
is it posiible to add readonly property to date input?

There have been a few PRs merged in the last week or so, I'm just wondering when a new version will be published so that those changes are available.

When using a DatePicker in an open Modal, the datepicker is in the background and not usable.

Describe the bug
When any date in January 2018 is chosen in the DateRangePicker, "Invalid Date" is displayed. January 2017 is fine.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://arfedulov.ru/examples/semantic-ui-calendar-react/
2. Click on the element displaying "From - To"
3. Scroll back to January 2018
4. See "Invalid Date'

Expected behavior
January 2018 ought to work like all the other months.

Screenshots
If applicable, add screenshots to help explain your problem.

Dependencies versions
Provide version numbers of following packages:

• semantic-ui-react
• semantic-ui-css (or any alternative)
• semantic-ui-calendar-react

Describe the bug
Calendar pop-up closes on month mouseover. Similar or a regression of #34.I'm able to reproduce the original reported behavior using version 0.10.0 with Semantic 0.83.0. Reverting back 0.81.1 resolves this behavior so something between these two versions causes the calendar to close on hover

To Reproduce
Steps to reproduce the behavior:

1. https://react-e1y1ed.stackblitz.io

Expected behavior
Mousing over the calendar should not close randomly, but close on selection

Dependencies versions
Provide version numbers of following packages:
"semantic-ui-calendar-react": "^0.10.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "0.83.0",

once the DateTime picker is focused, the table appears below in a popup, but the user ca'nt use keyboard navigation (typically arrows/enter/space) to navigate (see how it's done in the jQuery initial implementation)

It would be great to have keyboard support to make this component accessible

Hi there,
you explicitly warn that there are compatibility issues with semantic 0.83 - could you please state the nature of the compatibility emergency? ;) Can I help?

Regards
Frank

Fragment is used...
bundle.js:13085 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of DatesRangePickerContent.
in DatesRangePickerContent (created by DatesRangeInput)
in table (created by Table)
in Table (created by DatesRangeInput)
in div (created by Popup)

When typing in DateInput, after a while chrome reports a warning:

Warning: Expected `onClick` listener to be a function, instead got `false`.

If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.
    in i (created by Icon)
    in Icon (created by PickerHeader)
    in th (created by TableCell)
    in TableCell (created by TableHeaderCell)
    in TableHeaderCell (created by PickerHeader)
    in tr (created by TableRow)
    in TableRow (created by PickerHeader)
    in thead (created by TableHeader)
    in TableHeader (created by PickerHeader)
    in PickerHeader (created by DayMode)
    in table (created by Table)
    in Table (created by DayMode)
    in DayMode (created by DatePickerContent)
    in DatePickerContent (created by DateInput)
    in div (created by Popup)

Because it gives advise already how to solve it, it would be nice for this to be done.

Describe the bug
I still have the same problem after updating to 0.13

Generic type 'SyntheticEvent' requires 1 type argument(s) on semantic-ui-calendar-react/dist/pickers/BasePicker.d.ts

Is it possible to turn the autocomplete off on the input tag of the date picker? The autocomplete is hiding part of the calendar popup (Chrome Version 68.0.3440.106)

Hello.

Is possible to disable some days in calendar?
#17 - 👍 , but it helps to limit only start and end dates.

For example: I would like to disable 11, 12, 17 dates in each month (or something like this).

I found a code. Maybe will be possible to pass some function here? Like:

class DateTimeForm extends React.Component {
  ...
  isDisabled = (day) => {
    /** return true or false */
  }

  ...

        <DateInput
          name="date"
          placeholder="Date"
          value={this.state.date}
          iconPosition="left"
         isDisabled={this.isDisabled}
          onChange={this.handleChange} />
  ...
}

DatePickerComponent.js

const disabled = !isDayInMonth(day, showedMonth) || isDisabled(day);

Feature request to only enable some dates to be selected. In our use case the end user is only allowed to select one day per each week.

Describe the bug
By navigating to the DateTimeInput using Tab of keyboard. I can select the Initial date & time which is today on default by pressing the 'Enter' key even though I got it disabled using minDate property.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/raju-semantic-issue?file=index.js'
2. I have given 'minDate' to disable some past dates and hours till some time..
3. In the output screen press the tab key so that input field will be selected and the calendar popup will be opened and the keyboard cursor will be at the initial date given. Now if I press the 'Enter' key even though it is a disabled date, I am able to select it.
4. Even if I don't give any initialDate, I am able to select 00:00 time of today which is disabled.
   However I can't navigate to disabled dates/hours after navigating to valid ones.

Expected behavior
Shouldn't be able to select disabled date/time.

Dependencies versions
Provide version numbers of following packages:

• semantic-ui-react : 0.84.0
• semantic-ui-css (or any alternative) : 2.4.1
• semantic-ui-calendar-react : 0.12.1

Thanks for porting the mdehoog/Semantic-UI-Calendar to react! 👍

Do you have any plans to support clicking on the month to "zoom out" and support months/years? I believe the mdehoog version supports this via a mode which can be also be year and month

For example:

Describe the bug
Using DateRangeInput, any date of January is 'invalid-date', its working for any other month

To Reproduce
DateRangeInput and try to select a date in january

Expected behavior
Just like any other month :)

Dependencies versions
Provide version numbers of following packages:

• semantic-ui-react 0.78
• semantic-ui-css (or any alternative) 2.2.12
• semantic-ui-calendar-react 0.9.0-alpha.2

- Popup closing before selection
When I move the mouse cursor out of text field to the calendar, the popup is getting disappeared even before the value is selected.
However I have avoided this by passing these parameters

closeOnMouseLeave={false}
closable={true}

- minDate not checking minutes.
I have given the parameter minDate as {new Date()} but it is allowing me to select values belonging to the current hour but minutes before the current time.
For example:At time 14:30, selecting 13:55 is not possible but 14:05 is possible which should by disabled.

- No option to resize the popup
Calendar popup is appearing big in small screens and not able to reduce. Require some option to pass style the Popup which is the children.

Code available at https://stackblitz.com/edit/raju-semantic-issue?file=index.js

Dependancy versions:
react16.5.0
react-datepicker2.0.0
react-dom16.5.0
semantic-ui-calendar-react0.12.1
semantic-ui-css2.4.1
semantic-ui-react0.83.0

Can we add the other properties listed on https://github.com/mdehoog/Semantic-UI-Calendar ?

The ones I'm looking for in particular is a way to disable the selection mode for minute.

    disableYear: false,   // disable year selection mode
    disableMonth: false,  // disable month selection mode
    disableMinute: false, // disable minute selection mode

If I click in the timepicker on the values ​​00:00, 16:00 - 23:00, the popup of the timepicker closes. The onChange method is not called. But when I click on the other hours, the minute popup appears. onchange method works there too.

Describe the bug

icon={false} does not remove the icon at all
icon={null} removes the icon, but adds an empty space before the input

To Reproduce

icon={false/null} on the imput

Expected behavior
no icon, no space

Screenshots
icon={null} produces:

Dependencies versions

• semantic-ui-react: 0.84.0
• semantic-ui-calendar-react: v0.13.0

Describe the bug
It appears as if when I click on the "calendar" icon for the DateInput component, I'm not able to make the calendar popover appear.

To Reproduce
Steps to reproduce the behavior:

1. Click on the calendar icon. Nothing opens.

Expected behavior
Click on the input, it opens/appears! Click on the calendar icon: nothing. I know this is because I'm just using an onChange event for the DateInput and the underlying input would need a click handler or something along those lines to set the state of the DateInput to open or active. Read the documentation and toyed around with it for a bit and couldn't figure it out. Is this possible?

• semantic-ui-react
• semantic-ui-css (or any alternative)
• semantic-ui-calendar-react

Custom trigger

Please implement a custom trigger (eg. Button) instead of the default input. It could be working like the Popup from Semantic-UI but instead of providing the content prop, it would contain one of the pickers.

Here is an example made using the Popup component and inline TimeInput.

It would be used like that
<TimeInput trigger={<Button>Pick!</Button>} ... />

I might find some time to create that feature and make a pull request but first i would like to know what you think about a feature like that.

When you have a DateTimeInput within a modal and once you finish selecting a date & time the closable attribute also closes the modal itself.

relevant code:

        <Modal trigger={<Button>Show Modal</Button>} }>
          <Modal.Header>Select a Photo</Modal.Header>
          <Modal.Content>
            <Modal.Description>
              <DateTimeInput
                fluid
                closable
                label='Time and Date'
                name="dateTime"
                placeholder="Date Time"
                iconPosition="left"
              />
            </Modal.Description>
          </Modal.Content>
        </Modal>

I have not given any prop like 'displayWeeks' for DateTimeInput component but while selecting the value from the popup, exactly after selecting the hour I am getting the below warning in the console.

Warning: React does not recognize the displayWeeks prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase displayweeks instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in table (created by Table)
in Table (created by Calendar)
in Calendar (created by HourView)
in HourView (created by HourPicker)
in HourPicker (created by InputView)
in div (created by Popup)
in Ref (created by PortalInner)
in PortalInner (created by Portal)
in Portal (created by Popup)
in Popup (created by InputView)
in InputView (created by DateTimeInput)
in DateTimeInput (created by App)
in form (created by Form)
in Form (created by App)
in App

Able to simulate this issue in https://stackblitz.com/edit/raju-semantic-issue?file=index.js

Screenshot:

Dependencies:
react16.5.0
react-datepicker2.0.0
react-dom16.5.0
semantic-ui-calendar-react0.12.1
semantic-ui-css2.4.1
semantic-ui-react0.83.0

Currently, the component will always open to the current month and day when popping up. If the input field has a value, instead it should open up to the value's month and day.

I can probably write a PR for this tomorrow.

Is it possible to remove the calendar icon from the DateInput box ? Cause I wanna to customize the icon by using my own one

I used this minDate={moment(new Date())} but it's not working

Describe the bug
pickers/BasePicker.d.ts (81,48): error TS2707: Generic type 'SyntheticEvent' requires between 0 and 1 type arguments.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Dependencies versions
Provide version numbers of following packages:

• semantic-ui-react
• semantic-ui-css (or any alternative)
• semantic-ui-calendar-react

Describe the bug
Calendar hide immediately while hover on it

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/react-dhk726'
2. Click on 'input'
3. hover on some date
4. See error

Dependencies versions
"react": "16.6.0",
"react-dom": "16.6.0",
"semantic-ui-calendar-react": "0.11.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "0.83.0"

I have a modal from semantic UI react. Within that modal there is a form and within that form there is this:

 <DateTimeInput
    fluid
    label='Time and Date'
    name="dateTime"
    placeholder="Date Time"
    value={this.state.dateTime}
    iconPosition="left"
    onChange={this.handleChange} />

The issue is that the calendar popup appears below (behind) the modal and is not useable. I have tried changing the zindex of the DateTimeInput but it doesn't seem to work.

Just wondering if we are going to support Semantic UI React 0.84 in the near future?

Thanks

DatePicker: how to set initial, min & max value?

Hello, thanks for your component, it is easy to use.

but this component's date format is DD-MM-YYYY, is there have any way to change it to like YYYY-MM-DD? (exclude directly change the code)

Code :

let tdate = new Date();

render() {
let tdate = new Date();

<DateInput
              initialDate={tdate}
              name="uploaded_on"
              autoComplete="off"
              placeholder="Uploaded On"
              id='uploaded_on'
              value={this.state.uploaded_on}
              iconPosition="right"
              onChange={this.handleUploadedOn}
              dateFormat='YYYY-MM-DD'
/>
}

React State:

props:
autoComplete:"off"
dateFormat: "YYYY-MM-DD"
iconPosition: "right"
id:"uploaded_on"
initialDate:Sun Sep 09 2018 13:04:09 GMT+0530 (India Standard Time)
name: "uploaded_on"
onChange: bound handleUploadedOn()
placeholder: "Uploaded On"
startMode:"day"
value:""

State
mode:"day"