How to open default date picker by javascript? - 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()"

Related

make default customOptions property in the Date/Time Component JSON + FormIoJS

I have installed the following module in Odoo Community 15.0 version.
https://apps.odoo.com/apps/modules/15.0/formio/
I am using a Date/Time Component on multiple forms.
I think the default behavior of Date/Time component UI is like below:
Default view on desktop like below screenshot.
But in Mobile (Mobile Web Brwoser) show the default Android date/time view.
To make it consistent I have used below options in the Component JSON
"customOptions": {
"disableMobile": true
}
Main Question: How can I add this customOptions to all Date/Time component by default?
currently, I need to add this option manually to all Date/Time Components (Already created and even newly created Date/Time component)

How to style selected days in input type="date" HTML tag?

I need to use a calendar for my React app where user can choose multiple days.
So far I only found the react-date-picker module but I don't really like its CSS customisation.
I thought it would be better to use HTML tag input type="date" if there is such an opportunity as it looks nice on all mobile devices(my app is for mobile devices only).
On desktop the behaviour of this element is different from the smartphone, it closes each time the user chooses the date but I don't need desktop and on smartphones the calendar is not closing after the click which is great, however, I want to style selected days somehow with the background so the user would see what he chose.
I figured out how to add all those dates to an array and it basically works OK on smartphones but the problem is I can not style the calendar the opens up.
Can anybody suggest how do I go about styling the days user clicked on? Because by default it shows background for the last date you chose and that's it.
This is my codesandbox link
HTML does not provide such kind of <input>.
You can use daterangepicker for ranges.
Or, MultiDatesPicker to be able to select specific days.

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

Modifying Angular Material Datepicker popup

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?

Start native time input from javascript

I need to get a time from the user on mobiles. I dont want to show the html input field to the user. I thought I could simulate a click or give focus to on an input field to start the native time picker. It does not seem to work. any Idea How to do that ?
I wrote this pen to try it on android. codepen.io/kbenoit/pen/gJmay
Basically clicking on a button triggers this code:
var e = document.getElementById("timeInput");
e.value = "8:00:00";
e.focus(); // or
e.click();
Where
<input id="timeInput" type="time"></input>
I know I can implement my own picker in html, but it would be simpler and prettier to use the native time picker.
Since I'm using ionic (cordova and angular), I'm using this cordova plugin instead.

Categories