I have the following time input in my jQuery mobile app for android , I want to make a time picker for this input as the native Time picker in android devices . How can i do a time picker in jQuery mobile 1.4.0?
Please help me ...
<label for="notifTime" data-inline="true">
<input type="time" name="notifTime" id="notifTime" />
Have you tried the jQuery Mobile Datebox plugin: http://dev.jtsage.com/DateBox/?
It has a time picker mode that is good as long as you only need hours and minutes.
Here is a DEMO
<div class="ui-field-contain">
<label for="notifTime">Notification Time:</label>
<input name="notifTime" id="notifTime" type="text" data-role="datebox" data-options='{"mode":"timebox", "useNewStyle":true, "overrideTimeFormat": 12, "themeButton": "b", "themeInput": "a", "theme": "b", "themeHeader": "b"}' />
</div>
If you look at the datebox site, there are many options to play with...
Related
I have been using the input type="date" form element but have found that the "Clear" option visible on the iOS datepicker behaves like a "reset" and that there is actually no way to clear a date value.
This happens with both Chrome & Safari on iOS.
I created a codepen that illustrates this (providing you access it with an iOS device or simulator) here:
https://codepen.io/ajwgibson/pen/oPGvBB
<html>
<body>
<form>
<label for="the_date">The date:</label>
<br/>
<input type="date"
value="2018-09-06"
placeholder="dd/mm/yyyy"
name="the_date"
id="the_date">
</form>
</body>
</html>
Is there a workaround for this or do I need to revert to a JavaScript datepicker rather than relying on the HTML5 date input type for iOS users?
This issue is apparent on mobile Safari on an iPhone (I haven't tested on other iOS devices) but I have not been able to reproduce on Windows or Android.
A simple version can be found at https://jsfiddle.net/DaveParsons/havwgb2u/
I'm unable to use the native <input type="date"> as I require the flexibility of the datepicker.
To reproduce simply select a different month from the datepicker control then click on a day in the calendar or the random element - the iOS picker wheel re-appears.
Is there some way of letting iOS know it doesn't need to keep popping the picker up.
$("#date").datepicker({
changeYear: true,
changeMonth: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form>
<div id="date">
</div>
<button type="submit">
Test
</button>
<div>
<p>
random element with link
</p>
</div>
</form>
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO
Is there a way of changing the mode of a input type time in jquery mobile?
I use Jquery mobile 1.4.2
Here is the code:
<label for="time">Time:</label>
<input type="time" data-theme="a" data-clear-btn="true" name="time" id="time" value="">
But as default the input field is in am/pm mode so the behavior in a mobile device it is also in am/pm mode. In Germany we use 24h mode so I want to change the mode if possible. How can I change the mode?
I found the input type="time" here:
http://demos.jquerymobile.com/1.4.2/textinput/
Check this fiddle.It shows 24 hour date format.By default there is no date and time in jquery mobile. So you need to add external plugins.
FIDDLE OUTPUT
Your HTML input is like
<input name="mytime" id="mytime" type="time" data-role="datebox" data-options='{"mode": "timebox", "useNewStyle":true,"overrideTimeFormat": 24}'/>
download the date picker here.
Datepicker download link
Note: If you want to show the time in 24 hr format in input field you need to customize the JQM datepicker plugin. Like in JQM-datebox-core.js you need to set the timeFormat : 24,.
EDIT: In JQM 1.4.2 the document Document link says they are using third party plugin. They referred two plugins one is JQUERY UI and another one is arschmitz JQUERY MOBILE DATEPICKER . In the above example i use that is jquery mobile datepicker same as like second plugin.
Iam using phonegap 2.2.0 and jQuery mobile 1.2.0.
Here is my Date picker html,
<input class="dateField entry-time ui-input-text ui-body-d ui-shadow-inset ui-corner-all ui-icon-datebox" type="text" data-role="datebox" data-options="{"mode": "flipbox", "useNewStyle": true, "useFocus": true, "beforeToday": true}" readonly="readonly">
When I tested in iOS7 and 6 I got native text input keyboard for a moment, then got the native datepicker keyboard.
how to fix this?