Modifying Angular Material Datepicker popup - javascript

I would like to use the Angular Material Datepicker in my Angular application, but I a not quite satisfied with the default behavior The datepicker normally opens the calendar as a popup under the input. Instead I would like for the calendar to be permanently opened so that the user can continue to view the calendar as he selects different dates.
I understand that there is an opened property that reflects the status of the popup:
Angular Datepicker
Could I achieve the desired behavior by permanently setting the property to true to prevent the calendar from closing? I have never rally modified the default behavior of a library before...how would I go about this?
Perhaps a different approach would be separating the input from the calendar? I wonder what the best design approach would be?

Related

Material-UI pickers, partial date / multiple formats

I'm using the Material-UI-pickers library and have created a KeyboardDatePicker element that I would like to have a dynamic behaviour, allowing the user to enter partial dates by using the keyboard (while the behaviour of the picker popup should remain the same). I want 1998, 1998-04, 1998-04-12 to all be valid inputs.
I've been reading through the documentation but can't figure out a way to make this work. Any ideas?
https://material-ui-pickers.dev/api/KeyboardDatePicker
https://material-ui-pickers.dev/demo/datepicker

Customizable Angular datepicker

Do you know an Angular datepicker which has input features like:
Keyboard navigation (e.g. keydown for previous day, keyup for next day) in the input field (so I don't mean in the datepicker popup)
Autocomplete, e.g. when you fill in 12/12 and tab away, it automatically fills in 12/12/2019
Keys for specific actions, e.g. T fills in today's date
Or a datepicker which can be easily customized to work like this?
I found that datepickers from libraries like Kendo and Syncfusion try to do too much and are therefore difficult to customize to our needs. They focus on the datepicker popup, while the input field is hard to work with without mouse.
(the old ASP.NET Peterblum components had all this user-friendly functionality which does not seem to be available in modern frameworks, see: http://peterblum.com/DES/DateAndTime.aspx#DateTextBox).
You can find some date-pickers written in angular here, https://angularscript.com/?s=datetime+picker+. Most of these are customizable as your needs. Thanks

CKEditor 4 having problem when used in Material UI dialog

I am working on a React project where I have used CKEditor 4 on Material UI dialog. When I am trying to use advance options like Math. I am not able to type in, anything on input, textarea fields. I have searched for solutions but all the solutions are with respect to Bootstrap Modal. If anyone has faced the same issue using the Material UI dialog. It will be a great help if you can share the solution.
Solution for Bootstrap Modal: http://stackoverflow.com/a/18554395/778587
Material UI dialog: https://material-ui.com/demos/dialogs/
Attaching the Screenshot for the reference.
Steps to reproduce the issue. - Open https://codesandbox.io/s/vv50789765 for code example
Step 1: Open CKEditor and click on the picture icon highlighted in the screenshot.
Step 2: Once you click on the picture icon another popover will be opened with some input form elements. None of the input form elements is editable, I am not able to type anything in the form elements. Please refer the screenshot.
One of the Modal props is disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
Without this property set, every time you try to change focus to one of the input fields in the ckeditor image dialog, the Material-UI Dialog (which uses Modal) automatically brings focus back to itself.
Here's a version of the sandbox with disableEnforceFocus specified which then works:
https://codesandbox.io/s/80pu0

How to open default date picker by javascript?

In normal html, I use below code to define an input date picker which allow user to select date in a popup calendar. It works fine.
<input type='date'></input>
but now, I want to show the date picker on a onClick function of a button. I know that there may be some other 3rd party date picker component available. But I don't want to bring new dependencies in my application. So i am looking for a default way to support this behavior.
BTW, my web app is built on react, redux framework. And it is running on android and iOS webview. If the default date picker doesn't support this requirement, any 3rd party component which is fit for mobile device and compatible with react is also welcome.
Give id to the input tag and then on click of a button use .focus() event
For eg: onclick="document.getElementsByTagName('input').focus()"

Bootstrap Datepicker change default view date

I'm using a bootstrap datepicker and I want to set the defaultViewDate option (http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#id3). It all works fine if I set it at instantiation like this:
jQuery(element).datepicker({
defaultViewDate: {year: 2000}
});
The trouble is that I want to have the default view (not the value) update in response to user input. I'm including this as part of an angular app on a page so I was hoping there would be a way to leverage data-binding here.
Angular UI Bootstrap has a datepicker directive that sounds like it can do what you want. In the example they have, they change the default view by way of buttons at the bottom of their example.

Categories