🌈 Feature

Hi,

Actually, the calendar display inline the container, disturbing the presentation. As following:

How can I put it into a 'pinned popup', please ?

Thanks in advance

I think it could work by:

• Displaying the input, with the icon,
• Showing the calendar into a popup when the user clicks into the input

Just an example: [https://jsbin.com/ruqakehefa/1/edit?html,js,output]

🐛 bug report

Description of the problem

When I click on the date I get the following

83 |   )}
84 | </div>
85 | 
> 86 | <span title={`${months[calendar.month]} ${calendar.year}`}>
| ^  87 |   {months[calendar.month].slice(0, 3)} {calendar.year}
88 | </span>
89 | 

How has this issue affected you? What are you trying to accomplish?

This only happens when I click on the date itself, if I click on the calendar or clear symbol it works fine.

Link to a sandbox: link (optional)

🌈 Feature

We have some locales options, but we can always have more! 😄

In order to do this, you should:

📝 Clone the English locale and change the texts;
🔑 Add the locale key to the types;
🔑 Add the locale key to the Storybook options;
🎉 Submit a PR with the changes.

If you are not familiar with open-source contributions, checkout this course.

🐛 bug report

The option format="DD/MM/YYY" doegenerates an error - TypeError Format is not a function

Description of the problem

I need the date to display in European format DD/MM/YYYY.
Where the SemanticDatepicker is used outside a Redux Form Field it is possible to use the format option to set the date format. This does not work within a Form.input

How has this issue affected you? What are you trying to accomplish?

As the main usage is outside the USA iIneed the format to be in the UK format of DD/MM/YYY

datePicker.pdf

Link to a sandbox: link (optional)

🐛 bug report

Description of the problem

Under the following situation, there's a problem when using the onChange() callback to update the value to state variable.

1. Focus the text input box
2. The date picker is popped up. Select a date.
3. The selected date value is displayed in the input text box.
4. Then focus the date input box again.
5. This time manually use backspace to remove some digits, resulting a invalid date format
6. Then move the focus away from the date input text box.
7. The invalid date is removed from the date input box, resulting an empty string being shown in the date input text box.

However, step (6) or (7) does not fire another onChange() call.
In other words, the state variable has no way to be updated, and is still having the value after step (3) or (4).

How has this issue affected you? What are you trying to accomplish?

This can result a wrong value is recorded and submitted.

Apparently, step (6) or (7) should fire a proper onChange() call so the developer using the library can update their state variables too.

Link to a sandbox: link (optional)

🌈 Optional field to also input a time in hours:minutes:seconds

Thanks for this great lib !

I now need to add this feature on a range Component
<SemanticDatepicker
onDateChange={(dateRange) => this.setState({ dateRange })}
type="range"
selected={dateRange}
/>

2 input time cells could be added below the "day of the moment component"

The selected output date would then also include the time selected.
For the HH:MM:SS being the time being set is equal to the current time, but it is too bad the user is not able to specify something different.

🐛 bug report

Description of the problem

Even when the readOnly prop is true, we can still change the value of the datepicker.

How has this issue affected you? What are you trying to accomplish?

N/A.

Link to a sandbox: link (optional)

The bug can be seen in our documentation.

❔

If we enter the date using the keyboard, and we press Tab to go to next control, the value is not set.
The event OnChange is not executing.
This is happening with version 2.12.0, but seems to be working fine on version 2.3.0

🌈 Feature

Right now, we have an outer div in the datepicker with the field class wrapping the Input component and the calendar. This approach has some issues, especially related to how the library behaves in forms.

We must remove this div and implement the rendering of the calendar in another way. I'm not sure how this is supposed to work, but maybe these implementations can help:

https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/app/components/ContextMenu/index.js

https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/app/components/Portal/index.js

When I am clicking on the SemanticDatePicker component, popup with the calender is not visible. BUT popup calender is there on the screen(when I inspected the component, I can see it's size and other CSS related stuff there). There must be some CSS trick which I am missing. Although I am including the below css in my component file I doubt that I am missing any CSS files.

import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';

Please let me know if anyone else have faced the similar issue. Thanks in advance.

🐛 bug report

Description of the problem

How has this issue affected you? What are you trying to accomplish?

Link to a sandbox: link (optional)

🌈 Feature

Description
Would be nice to have a way to prevent some dates of being selected, e.g the user doesn't want to allow weekend days to be selected.

How it should work?
Something similar to react-datepicker's filterDate

How can this be implemented?
Live example and code example

When trying to use documented "pointing" prop in react component I got an error saying that it's not defined

Here is 2 fields side by side, they both have "required" tag, but the little star * doesn't show up on the date picker label. You can see screenshot attached.

    <Form.Group widths='equal'>
      <Form.Select fluid required
        label='Group'
        placeholder='Group'
        name='group'
        options={groupOptions}
        onChange={handleChange}
      />
      <SemanticDatepicker fluid required
        label='Date'
        name='date'
        value={formData.date}
        onChange={handleChange} />
    </Form.Group>

🐛 bug report

Thanks for your work, I like the project.

Description of the problem

Hello, when I use the SemanticDatepicker with type as range, I expect the to catch the onBlur callback when the second date is selected in the range. Right now, it only fires when you select the first date (and not the second date in the range). Seems like the onBlur functionality could be working only for a single date picker

How has this issue affected you? What are you trying to accomplish?

I'm trying to automatically make a query when a range is set. I can do this by detecting the length of the data.value in onChange but that doesn't seem like the proper way.

Link to a sandbox: link (optional)

https://codesandbox.io/s/romantic-feather-025i4?file=/src/App.js

Setting selected date after the initial state has been set. i,e, a button on the page with a set date

🌈 Feature

I think it would be nice to be able to show the previous X and the following Y Month relating to the date-prop.

<SemanticDatepicker previousMonths={2} followingMonths={3} />
The props are Non negativ Integers.

e.g.: if it is March, i want to Show the previous Months January and February and the folloing Months April, May and June
=> January, February, March, April, May, June
Using the next button it would show the Months between February and July
=> February, March, April, May, June, July
Using the next button again it would show the Months between March and August
=> March, April, May, June, July, August

❔ Question

I am working on a project written by typescript and I would like to use ReadOnly props in SemmaticDatepicker, then I got compile error because readOnly is not defined in interface SemanticDatepickerProps. Following codes are from "react-semantic-ui-datepickers/dist/index.d.ts"

export interface SemanticDatepickerProps {
  clearable?: boolean;
  date?: Date;
  disabled?: boolean;
  error?: boolean;
  firstDayOfWeek?: number;
  format?: string;
  icon?: SemanticICONS;
  iconPosition?: 'left';
  id?: string;
  keepOpenOnClear?: boolean;
  keepOpenOnSelect?: boolean;
  label?: string;
  loading?: boolean;
  locale?: Locale;
  maxDate?: Date;
  minDate?: Date;
  name?: string;
  onDateChange: (newDate: Date | Date[] | null) => void;
  placeholder?: string;
  pointing: 'left' | 'right' | 'top left' | 'top right';
  selected?: Date | Date[];
  showOutsideDays?: boolean;
  size?: SemanticSIZES;
  transparent?: boolean;
  type: 'basic' | 'range';
}

🐛 bug report

Description of the problem

The datepicker overlaps the screen if there isn't enough space to be displayed.

How has this issue affected you? What are you trying to accomplish?

If the component is on the right side of the screen, the datepicker doesn't show completely because it overlaps the screen.

Link to a sandbox: link (optional)

Suggested solution: (optional)

I'm not sure if it's correct, but I think we should calculate the datepicker's position based on the input's position and pass some style props to it.

When validating the input, it would be nice to attach a class into it on error, for instance to surround it with a red border.

Is it possible to pass a className for SemanticDatepicker?

❔ Question

Can I have time input with this?

🐛 bug report

Description of the problem

If datepicker is nested within a semantic-ui element e.g. Table with inverted=True, the text inside the datetime dialog will be styled with an inverted theme (color: white) and the dialog box will also stay white, which does not play well. We could manually override the style but it would be nice to pass in a prop inverted

How has this issue affected you? What are you trying to accomplish?

Link to a sandbox: link (optional)

🐛 bug report

Description of the problem

When placing a DatePicker inside of a <Segment placeholder> it hoses the selector a little bit. Additional CSS is getting applied due to the placeholder for buttons that causes the [<<] [<] DATE [>] [>>] to get split so the arrows are on top of eachother.

How has this issue affected you? What are you trying to accomplish?

This is probably a non-common usage of placeholder though I am using segment/placeholder in a Modal for the centering/padding. This modal purely allows selecting a date and closes/executed on date change

Not a big deal. I removed placeholder and replaced with textAlign and style to add padding.

Link to a sandbox: link (optional)

❔ Question

Suppose we have two people his name is jhon,tony and that list is dynamic it may be increase, so we need to get the get the name or id of current field event. how can we recognise it?

Link to a sandbox: link (optional)

🐛 bug report

I get this error when I select a date. What am I doing wrong?

TypeError: o is not a function[Learn More] react-semantic-ui-datepickers.js:1
The above error occurred in the <t> component:
    in t (created by FormField)
    in div (created by FormField)
    in FormField (at AddressForm.jsx:76)
    in form (created by Form)
    in Form (at AddressForm.jsx:45)
    in div (created by Segment)
    in Segment (at AddressForm.jsx:44)
    in div (created by GridColumn)
    in GridColumn (at AddressForm.jsx:43)
    in div (created by GridRow)
    in GridRow (at AddressForm.jsx:42)
    in AddressForm (at Checkout.jsx:119)
    in Checkout (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (at App.jsx:27)
    in div (created by Grid)
    in Grid (at PageContainerChildren.jsx:17)
    in div (created by Responsive)
    in Responsive (at PageContainerChildren.jsx:16)
    in PageContainerChildren (at PageContainer.jsx:54)
    in div (created by Responsive)
    in Responsive (at PageContainer.jsx:48)
    in PageContainer (at App.jsx:25)
    in Switch (at App.jsx:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:23)
    in div (at App.jsx:22)
    in App (at index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Description of the problem

How has this issue affected you? What are you trying to accomplish?

I am trying to select a date thru the datepicker and pass value to my state.
My package.json (note: some packages have been removed)

"dependencies": {
    "npm-run-all": "4.1.3",
    "perfect-scrollbar": "1.4.0",
    "prop-types": "^15.6.2",
    "react": "16.4.0",
    "react-chartist": "0.13.1",
    "react-dom": "16.4.0",
    "react-google-maps": "9.4.5",
    "react-image-gallery": "^0.8.11",
    "react-loadable": "^5.5.0",
    "react-materialize": "^2.4.5",
    "react-moment": "^0.8.2",
    "react-notification-system": "^0.2.17",
    "react-parallax": "^2.0.0",
    "react-router-dom": "4.3.1",
    "react-scripts": "1.1.4",
    "react-semantic-ui-datepickers": "^1.7.0",
    "react-slick": "^0.23.1",
    "react-spinners": "^0.4.5",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^2.0.1",
    "react-swipeable-views": "^0.13.0",
    "react-tagsinput": "^3.19.0",
    "react-toastify": "^4.4.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "semantic-ui": "^2.4.2",
    "semantic-ui-react": "^0.83.0",
  },

Link to a sandbox: link (optional)

When selecting the same date from a BasicDatePicker twice in a row (a duplicate selection), the component resets its entire state, and clears out the selection.

From looking at the code, it seems like this behavior is supposed to happen. However, it seems counter-intuitive to me to clear the whole selection if a date is selected twice.

I can't come up with an easy workaround for this in my own code.

If I were to create a PR related to this, I could do one of two things:

• Stop the state from resetting on a duplicate selection, and instead close or keep open the date picker according to the keepOpenOnSelect prop.
• Add a new boolean prop (clearOnDuplicate or something to that effect), defaulting to true (the current behavior), which controls whether or not this behavior occurs in the first place. I.e:
  • clearOnDuplicate={false}: If a duplicate selection is made, nothing happens, and the date picker closes or remains open according to the value of keepOpenOnSelect.
  • clearOnDuplicate={true}: If a duplicate selection is made, the component's state is completely reset (current behavior, possible default).

Let me know what y'all think.

❔ Question

Hi

I just made the upgrade from the previous version. So, I replace the locale import by a reference to locale into the tag definition (as following):
<SemanticDatepicker selected={oDateRange} type="range" showOutsideDays locale="fr-FR"...>

The build step (based on rollup) runs correctly, but the execution fails with the following error:
ReferenceError: "require is not defined"
More specifically, at: react-semantic-ui-datepickers.esm.js:1084.

I import a lot of esm files, withount encounter this issue. Moreover, according the rollup configuration, it seems the locales files must be embedded into the distribution files. But, it seems do not be the case.

Has I missed some thing ?

Thanks in advance

Fred

🐛 bug report

Description of the problem

Hi,

as for #27, I've integrated the library and the css, as following:

import React from 'react';
import { observer } from 'mobx-react';

import { Checkbox, Grid, Header } from 'semantic-ui-react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
...
render() {
	return (
		<Grid.Row columns={4}>
			<Grid.Column width={4}>
				<Header size='small' floated='left'>Envoi</Header>
			</Grid.Column>
			<Grid.Column with={2}>
				<Checkbox   name='toSend' value={this.props.campaign.toSend} label='toto'
				            onChange={this.handleSelected}/>
			</Grid.Column>
			<Grid.Column with={6}>
				<SemanticDatepicker name='datePicker' type="range" showOutsideDays
									onDateChange={console.log}
				>
				</SemanticDatepicker>
			</Grid.Column>
		</Grid.Row>
	)
}

But, as for #27, the result looks like

How can i fix it, please ?

Thanks in advance

Fred

How has this issue affected you? What are you trying to accomplish?

It's not blocking for now ...

Link to a sandbox: link (optional)

Can I validate the field with yup?

dataAgendamento: yup.date().required()

❔ Question

How do you set current value/selected value? Because it seems selected is not available at TypeScript level.

For example, this doesn't work:

<SemanticDatepicker onChange={this.onChange} selected={date} />

selected is not a member of SemanticDatepicker.

Also, lets say I have a date object in my state:

<SemanticDatepicker onChange={this.onChange} value={date || null} />

This creates an infinite loop in my project. Don't know why. Still investigating.

P.S.: Turkish translation is on its way...

Got a question. How do I get the value of the inputted date on the onChange event?
I'm using react hook
const [currentDate, setNewDate] = useState("")
Here's the code
<SemanticDatepicker onChange={evt => setNewDate(evt.target.value)}/>

I tried following the example in the Codepen with onDateChange but that doesn't seem to work in the new version.

🌈 Feature

What is this feature
I'm using this library in my project and for my particular use case, I would like to add a button to pick tomorrow/next week/next month in the datepicker (similar to the Today button).

I would probably add a prop for showTomorrow, showNextWeek, showNextMonth which defaults to false and if true they add a button under the today button. Would probably need to add new values to locales as well.

I would be glad to add this feature, if you see it fitting the component and something you are willing to merge.

Looked through docs and couldn't find a way to remove the large 'Today' button at the bottom of the datepicker. Would love to keep it simple and only display the calendar itself.

If there's not a way, is there a way to change the size of the date picker?

]# 🐛 bug report

When date picker is open in Internet Explorer 11. The tabular form of date number gets distorted.

You can try to open this link: https://react-semantic-ui-datepickers.now.sh in IE 11

🌈 Feature

Currently, we are exporting the locales as ES6 modules and we receive them as a prop.

I think we can receive the locale as a string and dynamically import the locale from a JSON file.

As expected, the locale must be updated if the prop value change and fallback to English if not provided or has an invalid value.

This is probably supported by default since tsdx uses Rollup under the hood.

🐛 bug report

Description of the problem

When using typescript, one can not set animation to false as the type is not declared.

How has this issue affected you? What are you trying to accomplish?

The datepicker flickers when focus is on the input field

Link to a sandbox: link (optional)

❔ Question

Hi,
I have implemented react-semantic-ui-datepickers inside my react application and everything works fine, but I have a question. Is there a way to display the datepicker inline? I mean without the need to click inside the textbox and wait for the popup to appear. A way to display only the actual datepicker ready to use.

Thanks

🐛 bug report

Description of the problem

When passing selected as a prop with the current day as a parameter, selecting other dates is impossible.

How has this issue affected you? What are you trying to accomplish?

I want to have the current day set as the default selected date, as well as allow other dates to be selected.

🐛 bug report

Description of the problem

This component has a very different API/parameters/signature for onDateChange event to that presented by the Semantic UI React components. The components in Semantic UI React all have (event, data) signatures for event handlers such as those for onChange . This facilitates consistent treatment for the whole family of components using generic event handlers.

How has this issue affected you? What are you trying to accomplish?

The component simply doesn't play nicely in a form where generic event handlers have been written to interact with the events of Semantic UI React components.

Could you please let me know year selection option here now it is going to 12months back but I need year selection

When grouped with semantic form inputs in a modal, the label does not appear at the top of the component, but to the left.

https://codesandbox.io/s/focused-wescoff-yxy2j?file=/src/App.js

🌈 Feature

Since date-fns has now a stable release, we should try to use it.

We should install date-fns@2 and replace all the imports.

PS: It may not be possible to use everything from v2 and we may need to use functions from v1.

How to set date value through redux-form?

🌈 Feature

Since dayzed has a new stable release, we should try to use it.

We should install dayzed@3 and see if everything continues to work. It should.

🐛 bug report

Autocomplete is not working in the date component.

Whenever the input field is empty the input is giving the browser suggestions which we can turn off but it is not doing any affect in this component. Below is the image showing that the suggestions for the inputs are available which I want to off. On simple Form.Input autoComplete='off' is working fine but with semantic ui date picker component it isn't working.

Below is the code picture that I am using to build the date input.

❔ Question

Hey,

I am really enjoying your date picker but I can't get the tab order working in my form when using the date picker.
Currently I am using react-hook-form and added the tab index attribute to the date-picker but it isn't picked up by the browser. Do you have any solution to this ?

        <Controller
          render={({ onChange, onBlur }) => (
            <SemanticDatepicker
              label="Datum"
              onBlur={onBlur}
              onChange={(_, { value }) => onChange(value)}
              locale="de-DE"
              placeholder="DD-MM-YYYY"
              format="DD-MM-YYYY"
              value={defaults?.start ? new Date(defaults?.start) : null}
              error={errors.startDate?.message}
              //@ts-ignore
              tabIndex='3'
            />)}
          name="startDate"
          defaultValue={defaults?.start ? new Date(defaults?.start) : null}
          control={control}
          disabled={readonly}
        //ref={register()}
        />

Regards Artur

❔ Question

I want to rendering SemanticDatePicker with a custom icon instead of close icon. How do I do that?
I tried passing a className in the icon prop but that doesn't work. Please help me for this

❔ Question

Can't change the width of the input.
The CSS customization is available only for cells :(
I tried to use id property like this:
<SemanticDatepicker type="range" id="x123" />
and CSS
#x132 { width: 500px; }
But it doesn't work.

Are there any ideas?

When I use SemanticDatepicker, is specify "basic" and when the calendar part displays, it shows the names of the days and the days all in one row. Am I using it incorrectly? Here's my code

![Screenshot 2019-04-10 20 35 43](https://user-images.githubusercontent.com/34940301/55922686-56da8f00-5bd0-11e9-878b-b418fdb052cc.png)

import React, { Component } from 'react';
import SemanticDatepicker from "react-semantic-ui-datepickers";

export class SessionDateChooser extends Component {

    handleDateChange = (evnt) => {
        console.log({event: evnt});
    };


    render() {
        return (
            <SemanticDatepicker type="basic" onDateChange={this.handleDateChange}/>
        )
    }
}

How to set date value in redux-form?
dispatch(change('FormData', 'date1', value));