In my cordova application i use jt sage date picker(v 1.3.0) inside the popup. Open date picker inside the popup using this SO answer now the problem after selecting the date the datepicker is not able to close.
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
In browser it is working fine but in my device(nexus 7) not working.
Here is the FIddle Demo
EDIT:
Now i noted another one problem when chaging the date or month in picker then again it come to the current date or month
Related
I'm struggling with an Angular/Ionic app that requires Date and Time entry via date-pickers.
Tapping on the Time field opens the time picker. In my browser, the picker works correctly, I can spin, choose a time, the [max] values work correctly.
But when we build an APK and install on an Android device, the spinner sometimes, randomly, doesn't work. A detailed description is appended below.
Running the app on the browser:
When the time picker opens, it contains the currently selected time and works normally.
Running the app on the device:
When the time picker opens, it sometimes contains the currently selected time, but sometimes, randomly, contains a value like 1 00 AM. When it does this, a date can be selected, but the value is not returned when the OK button is tapped.
Being a relative newcomer to Angular/Ionic, I'm battling to find any reports on similar behavior - or any ideas on how to debug this.
Has anyone else experienced this?
Here's the HTML snippet
<ion-input
readonly
[value]="validationsForm.get('tripEndTime').value | date: env.app.dateTimeTimeDisplay">
</ion-input>
<ion-modal class="time-model" trigger="open-modal-end-time">
<ng-template>
<ion-content scrollY="false">
<ion-datetime
id="datetime"
class="time-model-datetime"
#tripEndTime size="cover"
name="select-end"
presentation="time" formControlName="tripEndTime"
[min]="minEndDateTime"
[max]="maxEndDateTime">
<ion-buttons slot="buttons">
<ion-button
color="primary"
(click)="closeEndTime()">
{{ 'CANCEL' | translate }}
</ion-button>
<ion-button
color="primary"
fill="outline"
(click)="saveEndTime()"
color="primary">
{{ 'DONE' | translate }}
</ion-button>
</ion-buttons>
</ion-datetime>
</ion-content>
</ng-template>
</ion-modal>
And here's the .ts
async saveStartTime() {
console.log(this.CLASS_NAME + '.saveStartTime()');
await this.startTime.confirm(true);
this.updateStartDateAndTime();
this.setDateMaxMin('startTime');
}
updateStartDateAndTime() {
/* If Day spinner was set, we have YYYY-DD-MM; if Time spinner was set
we have HH:mm. Either way, we need to set BOTH spinners to the updated
YYYY-MM-DDTHH:mm */
const tripStartDay = moment(this.validationsForm.get('tripStartDay').value).format('YYYY-MM-DD');
const tripStartTime = moment(this.validationsForm.get('tripStartTime').value).format('HH:mm');
const updateDate = tripStartDay + 'T' + tripStartTime;
console.log(this.CLASS_NAME + '.updateStartDateAndTime()',
'\n' + 'updateDate', updateDate
)
this.setStartDateAndTime(updateDate);
}
setStartDateAndTime(updateDate: string) {
console.log(this.CLASS_NAME + '.setStartDateAndTime()', updateDate)
this.validationsForm.get('tripStartDay').setValue(updateDate);
this.validationsForm.get('tripStartTime').setValue(updateDate);
}
I had the same issue with many android versions , so I switched to ion2-calendar
this solve my problem
I'm writing an android tv app with lean-back and I want to use android standard date picker and I want to make this like this pic
(eg: Made year part bigger when the user is selecting year and so on)
How can I achieve this?
You cannot use the standard date picker in Android TV apps because it was not designed for navigation using D-Pad. However, you can create your own widgets for day, month and year selection. You can simply use VerticalGridView to create them. For instance, you can do something similar to this for days:
<androidx.leanback.widget.VerticalGridView
android:id="#+id/vgv_days"
android:background="#color/transparent"
android:layout_marginEnd="10dp"
android:layout_width="40dp"
android:layout_height="35dp" />
customArrayObjectAdapterDays = new CustomArrayObjectAdapter(new DatePartPresenter(getContext()));
for (int i = 1; i < 31; i++) {
customArrayObjectAdapterDays.add(i);
}
vgvDays = (VerticalGridView) view.findViewById(R.id.vgv_days);
vgvDays.setNumColumns(1);
vgvDays.setAdapter(new ItemBridgeAdapter(customArrayObjectAdapterDays));
You also have to set the number of days (28, 29, 30, 31) depending on the year and selected month.
Time picker dialog shows circular timings by default to select date and time. Instead of it Need to show keyboard entry by default to select date and time. While showing time picker dialog in circular style, it has keyboard icon to change circular style to manual entry style. This feature is available from Android Oreo OS devices. How to show Time picker dialog with manual(keyboard) entry by default in supporting devices ?
The time picker can be started in text input mode with:
MaterialTimePicker.Builder().setInputMode(INPUT_MODE_KEYBOARD)
For example:
val picker =
MaterialTimePicker.Builder()
.setTitleText(R.string.Set_time)
.setTimeFormat(TimeFormat.CLOCK_12H)
.setHour(12)
.setMinute(30)
.setInputMode(MaterialTimePicker.INPUT_MODE_KEYBOARD)
.build()
picker.show(supportFragmentManager, "TimePicker")
Source: https://material.io/components/time-pickers/android#using-time-pickers
In your showTimePicker() function you can set the initialEntryMode.
By default it's TimePickerEntryMode.dial but you can change it to TimePickerEntryMode.input.
Just add: initialEntryMode: TimePickerEntryMode.input,
I am using phonegap/cordova to make mobile app, I have an form where there is an input type="date" for picking date. I have used placeholder for setting text on the input type="date" which works perfectly on browser (desktop), but when I am viewing the same form on phone it doesn't works i.e. it shows blank instead of placeholder text.
Please help me how to display the placeholder of input type="date" in phone (android).
I have tried all the possible solutions, setting it as type="text" and making it as type="date" on focus and other stuffs. Please help
Thanks.
Krunal
input type="date" is not a good practice as it is not supported in all browser. it might not work in old phone.
I advice you to use this plugin https://github.com/VitaliiBlagodir/cordova-plugin-datepicker
after adding this plugin use following code in click/tap event of input tag
var options = {
date: new Date(),
mode: 'date',
androidTheme: 5
};
function onSuccess(date) {
alert("Selected date is "+date);
}
function onError(error) {
alert("you canceled the dialog.")
}
datePicker.show(options, onSuccess, onError);
have a look at plugin's Readme.md for more options.
you can use moment.js to show date as your desired format.
I'm developing HTML5 app for both Android and IOS and encountering some sort of buggy issue.
What I want to achieve is to get HH:MM format of <input type="time">
According to W3C
http://www.w3.org/TR/html5/forms.html#time-state-(type=time)
Default attribute of step is 60s. This means users would never be able to select seconds without any extra attributes and The timepickers of both IOS safari(IOS7/8) and Android(jellybeans - lolipop chrome latest) works as they are expected.
The problem is that Chrome's input displays HH:MM:SS instead of HH:MM. even though SS never get any value but 00
Is there any way to remove SS part?
Edit
This issue is only on Android's Chrome.
JSfiddle : http://jsfiddle.net/yymvLk9a/
thanks in advance
I got a solution for this.
html
<input id="foo" />
js
$("#foo").on("change",function(){
$(this).attr("type","text");
});
$("#foo").on("touchstart",function(){
$(this).attr("type","time");
});
display the value as type="text" and change the type before keyboard shows up.
simple but works great for me.
EDITED
I reported this bug to google.and got confirmed and fixed.
This bug will be disappeared next update.
https://code.google.com/p/chromium/issues/detail?id=459966
If you're getting the time from MySQL you can use
$sql = "SELECT *, TIME_FORMAT(PickupTime, '%H:%i') AS PT FROM Trips WHERE TripID=".$tid;
then when filling the form
type="time" id="pickuptime" name="pickuptime" value="<?php echo $row['PT']; ?>"
This seems to present in Firefox as HH:mm without seconds