Does anybody have an idea how to find out which timespan the datepicker popup cuurently shows and how to apply additional classes on some days?
Generally speaking I use moment.js for all of my date calculations / display. That said, Angular does provide a decent enough date filter for displaying..
Related
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.
I'm using MaterialUI in a project and I need a date picker (https://material-ui.com/demos/pickers/) that is able to only select month and year, what props should I use to achieve this?
The Material UI date picker docs specify that you can use a custom renderer here.
Here is the codesandbox for the custom renderer. You might be able to use the custom renderer with the format prop to achieve what you are looking for.
All links here are invalid so i want to give a quick summarization on this question, Material UI has a simple functions for what you need now (using DatePicker component), refer to official docs:
https://mui.com/components/date-picker/#views-playground
Codesandbox example here
as you can see there, adding:
views={['year', 'month']}
property to DatePicker does the trick!
How can I disable past dates in the picker? I want the users to choose only the future dates. So what I want is to disable the current date and all the past date so that one can only choose the date from tomorrow.
Picker datePicker = new Picker();
datePicker.setUIID("small");
datePicker.setType(Display.PICKER_TYPE_DATE);
The Picker class doesn't allow you to set the min or max dates. You can file an RFE on this in the CN1 issue tracker.
The Spinner class, however, does allow you to set a minimum and maximum date. Spinner is marked deprecated since we try to encourage use of Picker when applicable - mainly because it uses the platform's native picker widget when available, and generally results in better UX. In certain cases, like this, you can fall back to Spinner and it should still be fine.
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();
});
Does anyone have a solution to updating angular ui's disabled dates from a server response?
https://github.com/angular-ui/bootstrap/issues/779
You should create another directive that will require datepicker's controller. From your
directive you should call the refreshView of the datepicker to reevalute the disabled dastes.
Does anyone have example code for that?
I'm trying to use angular ui datepicker so that the disabled dates are read from a server response. I change the datepicker's min date to force it to refresh.
I saw another stackoverflow page where the user had it refresh, but it relied on the datepicker calendar being clicked. Another one used set the date min attribute as the value of another field.
For me, I have a completely separate field from the date picker. When changed, it sends an http request to the server, and on a successful response the available dates are updated.
The only problem with changing the min date to force a refresh is that sometime's there same but with different dates to disable. I'm looking into changing a datepicker option I do not use to a random value to force a refresh.
Does anyone have a better way? I saw cross controller communication via a service, but this is a different module. I also saw a github issue where the datepicker controller can be
I've found a simple solution to this problem using a decorator: https://gist.github.com/cgmartin/3daa01f910601ced9cd3
Then, you only need to call $scope.$broadcast('refreshDatepickers') to refresh the datepickers.
IMPORTANT: For more recent ui-bootstrap datepicker library, you may need to replace 'datepickerDirective' with 'uibDatepickerDirective' if you are using datepicker with uib-datepicker element or attribute.
The angular bootstrap datepicker has datepicker-options
This user listed the solution: https://github.com/angular-ui/bootstrap/issues/2189#issuecomment-225685104
bogdandrumen commented on Jun 13
Use datepicker-options="{minDate: yourScopeMinDate}"
which worked for me. I have two pickers, the second picker cannot be greater than the first one so if the first picker changes, the second picker's max date also changes.