I was trying to set a form Date Value for DatePicker using
this.prop.form.setValue
it sets but when i try to change the date and submit it shows the same set date it doesn't change the date.
Using antd DatePicker
have tried it on this link (Do change the antd version to 3.16 as some features are deprecated in the new antd releases )
https://codesandbox.io/s/dry-waterfall-3fhkt?fontsize=14
I found a work around it apperently antd saves the value into ._d and not into the main key value
the below code solved it for me
moment(values.dtReading._d).format()
Related
When using the DatePicker component from Ant Design and setting its value with the value prop, all dates in the pop-up calendar are highlighted in blue as if they are selected.
Moving the cursor over the pop-up calendar causes the date and month to change automatically without any click.
Clicking the "back" button also causes the year to change.
This issue does not occur when the DatePicker is not a controlled component. ( value is not passed as a prop )
DEMO
Ant-Design Version: 5.1.2
Change from moment js to dayjs
Ant Design is using Dayjs as a date library from 5.0.0.
Till 4.x it is momentjs.
The issue is because of passing a moment object as value to datepicker which expects a dayjs object internally.
We need to pass dayjs object instead of moment js object to resolve the issue.
Check this LIVE DEMO
If you want to use moment as your Date Library for your project follow this guide
I'm using element-plus library and I I'm struggling to achieve custom el-date-picker component behavior.
Is it possible to always keep date picker component open even after the values were selected from the calendar and applied to v-model? This is the component I'm working on: el-date-picker
I need to be able to select days from el-date-picker component and keep showing the calendar after the selected dates were submitted.
I am facing the following scenario :
I have a form array that allows to dynamically add or remove Angular Material MatDateRangePicker objects. When a specific range is selected in a dateRangePicker, I want that range to be disabled in the other dateRangePickers of the form array.
I am using the dateFilterFn method to apply the filter.
My problem is that when a range is selected in a specific dateRangePicker, it disables that specific range in all the other dateRangePickers (which is the desired behaviour), but also disables that range in the current dateRangePicker. So when I re-open that picker in which we just applied the range, the entire range is disabled which isn't convenient if I want to re-apply a new range in this picker which includes dates of the previously selected range within that same dateRangePicker.
If someone can help me figure this out, I'd be very grateful.
I created a stackBlitz project that simulates this feature of the application that I am developing :
https://stackblitz.com/edit/angular-ivy-zjpbcw?file=src/app/app.component.ts
I'm using Trent Richardsons Timepicker plugin: http://trentrichardson.com/examples/timepicker/
As you can see in the demo, there is a method to switch the picker to a select format.
What I'm trying to achieve is to append the select method straight underneath the default slider - at the moment you can only have either the slider, or the select, not both at once.
I can see in the docs that you can create a custom control type to change the output of the select using $.timepicker.setDefaults({controlType:myControl}) - and then writing a custom function. Should I be somehow creating a new function that merges both the slider and select together?
Any tips at what I should be doing for this?
I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle