How to prevent showing Jquery UI datepicker/timepicker on mobile - javascript

I am in trouble getting inputs types date and time to work on mobiles. I am getting double picking tools on mobiles (the native one and the JQuery UI) one and it won't let me complete the form, because datepicker won't hide. How can I prevent the JQuery UI picker to be displayed on mobiles that has native picking tool?
This is the sample code I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css\jquery-ui.min.css">
<script src="js\jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<form class="form-horizontal" method="post" action="seleccionar_detalles.php">
<div>
<input type="date" id="lala" classs="fecha1" name="lala">
<input type="time" placeholder="Salida" id="salida" name="Fecha_de_salida[]" />
</div>
<div class="form-group col-xs-24">
<div class="col-xs-6 pull-right">
<button type="submit" class="btn btn-siguiente">Submit</button>
</div>
</div>
</form>
<script>
$('#salida').timepicker();
$( ".fecha1" ).datepicker();
</script>

You are using a input type="date", The jQuery-UI Datepicker uses a input type="text":
From the jQuery-UI Datepicker Documentation:
<p>Date: <input type="text" id="datepicker"></p>
This way you can avoid the double picking tools.
If you need to suppress the jQuery-UI Datepicker on mobile devices, you may use one of the mobile-device detection techniques described here: What is the best way to detect a mobile device in jQuery? and toggle the input type, like this:
$(document).ready(function() {
var isMobile = ....
// HTML 5 input types: date, datetime, datetime-local, month, time, week
if(!isMobile) {
$('input[type="date"]').each(function() {
$(this).attr("type", "text");
});
$('input[type="time"]').each(function() {
$(this).attr("type", "text");
});
$("#salida").timepicker();
$("#lala").datepicker();
}
});

Related

Changing to datetime picker from datepicker

I was previously using Datepicker.js and I've now changed over to use datetimepicker, otherwise known as tempus dominus.
I switched out my input and div and I also changed the CDN script and the JS script function but I'm having some issues.
My site shows the input field and calendar icon in the modal but when I click the icon it doesn't bring up the calendar to select date and time.
Also, I'm using this to populate with an array value before hand that shows expiration dates so In the instance that there are multiple items with expiration dates, I need the datetimepicker to show for each one so I may have one picker or I may have multiple.
Is there a certain way I should change this to not only get my calendar to load, but also have it working for multiple instances?
<head>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/af.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js" type="text/javascript" >
</script>
</head>
<h6>Set New Expiration: </h6>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>

How to initialize after: Error: cannot call methods on autocomplete prior to initialization

I previously had a an old autocomplete script running with an older jQuery on an input form. I wanted to add markItUp to my text entry form and the autocomplete version I was using was no longer working with the newer jQuery.
I saw that the latest autocomplete was available in jquery-ui.js, but after installing that I started getting the following warning:
Error: cannot call methods on autocomplete prior to initialization;
attempted to call method '/include/suggest.php'
I looked up initialization and added this after $(document).ready(function():
$(this.target).find('input').autocomplete();
Same error message. So I tried making it more specific to the input field that's being autocompleted:
$(this.target).find("input[id^='last_']").autocomplete();
I'm sort of flying blind here. The autocomplete stuff for this page was done by someone I no longer have access to and I've never really written jQuery stuff myself. I'm trying to understand this but right now, I'm stumped.
Here's a skeleton of the page:
<script src="/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="/inc/auto/main.css" type="text/css" />
<link rel="stylesheet" href="ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="/js/markitup/jquery.markitup.js"></script>
<script src="/js/markitup/sets/default/set.js"></script>
[markitup styles]
<script>
function html_entity_decode(str)
{
var ta=document.createElement("textarea");
ta.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
return ta.value;
}
$(document).ready(function() {
$("#markItUp").markItUp(mySettings);
$(this.target).find('input').autocomplete();
$("input[id^='last_']").autocomplete('/include/suggest.php',{
matchCase:true,
formatItem: function(data, i, total)
{
var s=data[0].split(",")
return s.join(" ");
}
});
$("input[id^='last_']").result(function(event, data, formatted){
var ids=this.id.split('_')
var id=ids[1]; // from last_xx got xxx
var s=html_entity_decode(data[0]).split(",");
$(this).next().focus();
$(this).next().select();
//have only last value -- TAB pressed
if(s.length==1)return;
$('#first_'+id).val(s[0]);
$('#middle_'+id).val(s[1]);
$('#last_'+id).val(s[2]);
});
});
</script>
</head>
<body>
<h1>News Inserter</h1>
<form action="/forms/cronkite.shtml" accept-charset="UTF-8" method="POST">
Reporter (Last, First Middle):<br />
<input type="text" id="last_1" name="lastreporters" size="15" maxlength="30" value="" />, <input type="text" id="first_1" name="firstreporters" size="15" maxlength="30" value="" /><input type="text" id="middle_1" name="middlereporters" size="15" maxlength="30" value="" /><br />
Story:<br />
[markitup text area]
<input type="SUBMIT" value="Insert Data" /><input type="RESET" value="Reset" /><br />
</form>
Is the problem solely in my initialization call? One additional point: the autocomplete version I was using was Autocomplete - jQuery plugin 1.1pre Copyright 2007. Has the jQuery-ui version of autocomplete changed enough that I need to update my forms?
I Have Faced Same Problem Due to Older Version Of Jquery, Then I Have added "http://code.jquery.com/jquery-migrate-1.0.0.js" Js Now All Works Fine.
After digging through tutorials, I see that jquery-ui has changed things quite a bit. Off to the tutorials!

Token, tags, badges in input field

Please see my last post for the answer.
On my website I have an input field. I want to use it that users on my page can "tag" other users to an image (similar to the "person xy is on this picture feature on facebook).
As soon as the person starts typing, I want to display possible values via jQuery autocomplete and as soon as the person selects one possible value, I'd like to have the selected value displayed in a tag. (I speak of the optical representation, for example that the value is underlined with a grey, rounded rectangle, like here on SO).
This is my input field:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="example1, example2" />
Something like this will change the placeholder as you type:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.placeholderValue').on("keyup", function () {
$('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="placeholderValue form-control" />
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
</div>
</div>
</div>
</div>
</body>
</html>
I asked the question above a few weeks ago, but now realized, that it wasn't so well asked. And after a few days looking around, I found a solution for it.
I now wanted to let you know about my solution, just as a reference or hint for everyone else who finds this question or has the same problem.
So I am now using this library GitHub Tokenfield.
And use it like this:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
the basic JavaScript for initializing the input field is:
$(document).ready(function () {
$('#tokenfield').tokenfield();
})
However, if you want to use jQuery Autocomplete you can do so like this:
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white']
},
showAutocompleteOnFocus: true,
limit: 1
});
The input field gets initialized as tokenfield, so when entering data and pressing enter, it results in those token-badge-tag things.
After intitialization, it shows 3 tags, "red", "green" and "blue", which the library takes from the "value"-field of the input field.
I like this solution and library very much, because it also offers mechanisms to bind to jQuery Autocomplete via ajax, which is exactly what I wanted and needed.
I hope I was able to help somebody or save some time.

Bootstrap datepicker pop-up not shown the highlighted current date

I am using Bootstrap datepicker by using Bootstrap-datepicker API. When I click the button the calendar/datepicker pop-up shown but it didn't mark the current date as Blue font as shown in API examples.
I am using the below code:
<body>
<div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="form-control" size="56" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#datepicker').datepicker();
</script>
</body>
The calendar/datepicker pop-up shown but the current date is not highlighted as blue as shown in API Examples and also the mouse cursor is not pointer.
Please help me regarding this issue
If you are using this : https://github.com/eternicode/bootstrap-datepicker you have to give options when you initiate calendar, such as
$('#sandbox-container input').datepicker({
todayHighlight: true
});
$('#datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true
});
Here is the JSFiddle
Bootstrap Datepicker depends on its own CSS for styling the calendar widget.
For quickly importing the dependence, you can pick a version from cdnjs (make sure you pick a .css extension) and import into your HTML like this:
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
Just to add to the list of possible solutions as I was experiencing the same problem. The today class was not getting assigned to the current day using:
$('.datepicker').datepicker({
'format': 'mm/dd/yyyy',
'todayHighlight': true
});
The html in the example has a class of date only.
<div class="input-group date">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
In my case, I was missing the datepicker class. Added that to the element and now everything is working properly.
Needs to be:
<div class="input-group date datepicker">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Another option is to add this attribute to your datepicker input element:
today-highlight="true"
If you are using reactive form then you can also set today's date as a value in your formGroup initiation like this
myform = new FormGroup({
name: new FormControl('', [Validators.required]),
event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
})

bootstrap-datepicker.js auto close and not greater than this month

I'm using http://www.eyecon.ro/bootstrap-datepicker as the date picker in my form in conjunction with Twitter Bootstrap, and I'm having trouble getting it to auto close, and for any month/year combination greater than current month/year to be selectable. I've gone over and over the documentation, but can't see to get it. Any assistance appreciated.
My form is below
<div class="control-group">
<label class="control-label" for="CC_CARDEXPIRY"><strong>Card Expiry Month/Year</strong></label>
<div class="controls">
<div class="input-append date datepicker" id="CC_CARDEXPIRY" data-date="01/2014" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
<input class="span6" name="CC_CARDEXPIRY" size="20" type="text" value="01/2015" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
and my Javascript currently is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"</script>
<script src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#CC_CARDEXPIRY').datepicker();
</script>
By default, autoclose is false. You have to manually set it in the code as an option.
After playing with the datepicker, I found a way to do it without touching the autoclose:
I put this function above my call to the datepicker:
var popup = function(){
var d = $(this);
d.datepicker('update', new Date.today().toString("MM/dd/yyyy"))
.on('changeDate', function(ev){
// do what you want here
d.datepicker('hide');
});
};
Then my call to the datepicker looks like this:
this.$('i.icon-calendar').datepicker().on('show', popup);
I would highly recommend using the code found here instead of the eycon version. It originally came from eycon, but the github repo maintained by eternicode has a greater following, which means if you find and report a bug, there's a greater chance it will get fixed. I'm not saying it's any easier to use, but there's more support.

Categories

Resources