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!
Related
Is it possible to create a similar Dropdown Select with material-ui that looks like a Chip component like this?
If so could you direct me where to start?
yes, it is possible, Material UI have variant type of select, you can see and try those in the following link :
more and advanced select component in Material UI
So my question is :
Is there a way to customise the showDropdowns in react boostrap date
range picker ?
the scroll bar dropdown come with a default one and i want to add some
styles to it ..is this possible ??
By using custom cssClass property. and also you can use the calendar’s renderDayCell event to customize the appearance of the each day cell.
for more info https://ej2.syncfusion.com/react/documentation/datepicker/customization/
I would like to use the DateTimePicker component from #material-ui/pickers without having to render a TextField. In the designs for the feature I am working on, the date picker is brought up by pressing a button, not a text field.
It seems that the picker is always rendered as a TextField. When focused, the actual date/time picker shows up.
The documentation shows an example of how to programmatically open the picker https://material-ui-pickers.dev/guides/controlling-programmatically. The problem is that it still comes with a TextField.
I have also seen you can use individual pieces of the picker like Calendar or ClockView to build your own. Ideally, I'd rather avoid reinventing the wheel as much as possible.
Thanks!
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..
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.