Just stumbled upon a problem with using react-hook-form and Material UI DatePicker..
I am facing couple of issues and questions
The field array is doesn't contain any value which are picked
How to validate first and last date dynamically?
Is there any way to disable endDate picker dates based on startDate dynamically?
My sample could be great for people who are looking for similar solution, if it works.
It would be great if someone can put some pointers.
Related
The antd tables work well with Input components. I have been using the editable cell example at https://ant.design/components/table#components-table-demo-edit-cell and it works well with undo / redo functionality.
The Select / Options and Date Picker components however do not have any documentation in the context of a table that's hooked up to a state. I have gotten the Options / Date Picker to work but when implementing undo / redo logic, it looks like their state does not by default update like the Input fields. If you Google this, it is a tricky part of React in general to get these components to update automatically with state changes in a Form.
Is there an example of an antd table with select or date picker that's hooked up to state information?
I got the Select / Option to work correctly visually e.g. default states load correctly, depending on selection color changes etc. I can manipulate the data as needed. Similarly, got the Date Picker to work. However, where I am stuck is automatically tying state changes to update the components. I can probably do some crazy stuff like force render but before going that route wanted to check if there is a cleaner / better antd way of doing this.
I think you have to custom return to default Editable Cells like the following example url example
After wasting many hours on this, it looks like there is a bug in antd Forms. See this SO thread: React | Ant design select value not setting
In short, removed the Form.Item and everything works fine.
Currently Im developing an datepicker from hackerone react datepicker, where user can select date from day up to decade, but I didnt find any props in DatePicker component at their website to give user opportunity to select decade, maximum is a year selection. I decided to put prop yearItemNumber={100} so it will give a range of 100 years, but how can I combine 10 years into one option as it show in first screen?
How it may look:
What I have:
Also additional question, how can I display a century in datepicker header? Or its just a hardcoded text
I'm working with MUI DataGrid, I need to render a custom calendar column. Everything seems to be working as expected, but... . the calendar picker is hidden by the table boundaries, this image illustrates better the situation.
I've been tried changing between different positions of the render element, but it does not work, please take a look on this code sandbox.
https://codesandbox.io/s/datagrid-react-modern-calendar-8v432y
What can I do to do not overflow the table boundaries, and show the calendar picker on top of everything?
Thanks a bunch for your help.
I've made a date picker directive that uses a single date picker from the improvely datepicker library. It has two input tags and an OK button.
Date Picker Library
Single Date Picker Example
If I change the value of the input field via the keyboard the models get the desired value and calls to the server take place as expected. The problem arises when I use the date picker. The value of the model does not change. It still has the same value that I set via the keyboard.
But if I run document.getElementById('frompicker').value using the console it shows me the right date that I set using the datepicker.
If I don't set any value form the keyboard and only use the datepicker drop down, the values of the models are undefined.
I've tried a few solutions offered for Angular Boostrap UI Datepicker and Angular UI Datepicker. None of them work.
Edit after a comment
Code can be found here - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx
Any help is greatly appreciated :)
You should sync scope after datepicker change via
$scope.$apply();
or
$scope.$evalAsync();
seems it 'apply.daterangepicker' event for your datepicker
I tried all the methods mentioned in different answers. My colleagues told that it's a bad idea to use $scope.$evalAsync() or $scope.$apply() unnecessarily. Our code base does not use digest, compile and the likes. So that was causing a hindrance.
I finally decided to detect the date change event as suggested by Valery Kozlov (the accepted answer) and manually changing the model.
I accessed the date like this.
$('#frompicker').val(); // can be done without jQuery as well
Changed the model using this.
// use Angular's $on to make things consistent if needed
$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
scope.vm.from_date = $('#frompicker').val();
});
I am using Extjs datepicker.
I want to select multiple dates of datepicker by dragging over them.
For that I tried to make calendar dates draggable. I took the reference from here https://docs.sencha.com/extjs/5.1/core_concepts/drag_drop.html and wrote below mentioned code.
var calendarDate = Ext.get('DatePickerSchedule').select('td');
Ext.each(calendarDate.elements, function(el) {
var dd = Ext.create('Ext.dd.DD', el, 'datesDDGroup', {
isTarget: true
});
//Apply the overrides object to the newly created instance of DD
Ext.apply(dd, window.overrides);
});
But it doesn't seems to be working. Please suggest what I am missing.
Check out this Previously Answered Question. There's a fiddle provided that demonstrates how to implement multi-select on a date picker. It doesn't use dragging but it may be a suitable solution for your needs.
EDIT:
So this question really got me interested in how you might go about solving this. So I've had a play around and created custom date picker that extends the ExtJS datepicker but provides drag support for multiple selections using the mouse listeners I had suggested in my comment.
The fiddle can be found here DraggableDatePicker
One improvement you may want to make is to make the component aware of rows and the values within rows, so that when you mouse over a new row all dates on that row (prior to the one currently with the mouseover) are selected. My solution only cares about individual cells that are dragged over.