I have a react-datepicker component inside my form and i am trying to put a placeholder which says "please select a date" but datepicker only shows the date.I did research and some people say placeholder shows only if selected={...} is false but i don't know how to make my selected={} false on default and show on toggle.
I tried to use react-datepicker's code,it is placeholderText="" but i couldn't implemented it
this is my state in my form;
bookTime: {
data: new Date(),
name: "bookTime",
category: "text",
everFocused: false,
isValid: true,
extra : {
label:"Randevu Tarihi*",
help: "Geçersiz Alan!"
}
},
this is my datepicker component;
<DatePicker className="turkish"
locale={tr}
placeholderText="Please select a date"
onChange={this.handleChangeDatePicker}
onChangeRaw={this.handleDateChangeRaw}
selected={bookTime.data }
showTimeSelect
minTime={setHours(setMinutes(new Date(), 0), 7)}
maxTime={setHours(setMinutes(new Date(), 0), 22)}
minDate={subDays(new Date(), 0)}
timeFormat="HH:mm"
timeIntervals={60}
dateFormat="HH:mm,d MMMM yyyy"
timeCaption="Saat"
/>
placeholderText={'Please select a date'}
It work!
It seems like you are setting the current date as the bookTime.date at the initialization. So the selected value will not be empty at the start.
Try setting bookTime.date value to false at the initialization. Whenever a new date is picked, it (this.handleChangeDatePicker) should update the date.
Related
As I'm not exactly used to work with dates on Javascript, it's been quite hard to tackle it without asking for help, and I've been struggling for hours on this.
My goal is to choose a date using Material UI DatePicker and store it as a string following the "yyyy-MM-dd" format.
In my last attempt, I tried this:
const [userData, setUserData] = useState({
rating: 0,
review: "",
date: Date(),
});
Then, in DatePicker:
<LocalizationProvider dateAdapter={DateAdapter}>
<DesktopDatePicker
label="Watched on"
inputFormat="MMM dd, yyyy"
disableMaskedInput={true}
name="date"
value={userData.date}
onChange={(date) => {
setUserData((prevValue) => {
const dateWatched = startOfDay(date);
return {
...prevValue,
date: dateWatched.toISOString().slice(0, 10),
};
});
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>;
If I console.log(dateWatched.toISOString().slice(0, 10), when I pick a date it logs correctly. However, the date displayed on DatePicker mismatches. So, let's say I choose December 14, 2021. It logs 2021-12-14 like I wanted, but the DatePicker will show December 13, 2021. For the record, my local time is GMT -03:00, and I think this may be the culprit. I want to take time zones out of the way, so no matter where you are and the time of the day, you'll always get the correct date string saved on Mongoose and displayed correctly on DatePicker.
note: I'm using date-fns library.
I am using the range date picker of antd (v4.x).
<StyledDatePicker inputReadOnly={false} value={dateRange} onChange={onChange} />
In my test file I'm doing the following :
fireEvent.change(rtl.getByPlaceholderText('Start date'), {
target: { value: '2020-01-01' },
});
fireEvent.change(rtl.getByPlaceholderText('End date'), {
target: { value: '2020-03-03' },
});
fireEvent.keyPress(rtl.getByPlaceholderText('End date'), { key: 'Enter', code: 13 });
await waitFor(() => fireEvent.click(rtl.getByText('Apply')));
I tried few console logs in between fire events to see if the input actually has the right value, but it's always empty.
I also tried with :
userEvent.type(rtl.getByPlaceHolderText(...), myValue)
It didn't seem to work either. If you guys have any solution to that problem I would be happy to take it.
Thanks.
After few hours.. I figured out a solution.
// Click on the filter icon
fireEvent.click(rtl.container.querySelector('th:nth-child(3) .ant-table-filter-trigger'));
// Mouse down on element, to select input and trigger modal opening
fireEvent.mouseDown(rtl.getByPlaceholderText('Start date'));
// Writing the value of the desired date
fireEvent.change(rtl.getByPlaceholderText('Start date'), {
target: { value: '2020-01-01' },
});
// If the date format is valid, antd will highligh the written date, so we clicking on that one
fireEvent.click(document.querySelector('.ant-picker-cell-selected'));
If you try to change the value of the input without proceeding like that, it will probably not work, keep in mind that inputs are set to read-only by default, whenever you will try to change a value with just typing it will reset the input.
I am new to react material UI. I want floating label for auto complete component. but after selecting any value from the auto complete options label should stick on the top.
Please goto codesandbox see the actual problem.
Thanks in advance
You need to update the property of select element, after selection is made. For that I am using the state shrink, which is false initially, that will set true once the item is selected. If the state shrink is true, then InputLabelProps is set with {shrink: true}. Otherwise empty object is set.
state = {
single: null,
multi: null,
shrink:false //Newly added
};
handleChange = name => value => {
this.setState({
[name]: value
});
this.setState({shrink:true}); //Newly added
};
<Select
classes={classes}
styles={selectStyles}
options={suggestions}
components={components}
value={this.state.single}
onChange={this.handleChange("single")}
placeholder="Search a country (start with a)"
textFieldProps={{
label: "Label",
InputLabelProps: this.state.shrink?{shrink:true}:{} //Modified line
}}
/>
Demo
I'm using the angular Jquery UI datepicker(https://github.com/angular-ui/ui-date) for selecting the date of birth.
The datepicker correctly picks and displays time when I click on it. But, the value is saved as midnight of my current timezone(+0530).
For example, if the date 30/04/1981 is selected the actual model value: 1981-04-29T18:30:00.000Z. I understand that this is the expected behaviour, but for the case of setting the dob, the value should not change from country to country.
Is there an elegant way to convert this value to UTC 00.00:000z? While preserving the date selected in the current time zone?
html is given below,
<div>
<input ui-date="dateOptions"
name="dob"
ng-model="passenger.dob"
class="form-control"/>
</div>
<p>{{passenger.dob}}</p>
dateOptions are as follows,
self.dateOptions = {
changeYear: true,
changeMonth: true,
minDate: self.minDate,
maxDate: self.maxDate,
dateFormat: 'dd/mm/yy',
weekHeader: "Wk",
yearRange: "-100:+0",
showOn: "both",
buttonImage: "images/calendar.png"
};
Its working fine here in my punker.. https://plnkr.co/edit/sBdu1J?p=preview
I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out .
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />
In order to have the Kendo DatePicker working with a string date value model you need:
1) Use k-ng-model instead of ng-model.
2) Tell the widget in which exact format the date will be parsed.
<input kendo-date-picker k-ng-model="emp.datestart" k-options="datePickerOptions" />
Then at your AngularJS controller you will specify the date parsing format, for example:
$scope.datePickerOptions = {
parseFormats: ["yyyy-MM-ddTHH:mm:ss"]
};
you can use something like this
<h4>Select date:</h4>
<input
kendo-date-time-picker
k-options="monthSelectorOptions"
data-k-ng-model="dateObject"
data-ng-model="dateString.startDate"
style="width: 100%;" />
var startDate = new Date();
$scope.monthSelectorOptions = {
value: startDate,
format: "dd/MM/yyyy h:mm tt",
parseFormats: ['ddd MMM dd yyyy'],
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
},
culture: "de-DE",
};
And here is complete solution on kendo dojo