I'm trying to use datetimepicker by Tempus Dominus but whenever I try to pick a date from mobile the default keyboard opens and it hides the modal. I would like to prevent it from opening.
I already tried some workarounds I found online but I didn't get it to work. I also would like someone to explain how these workarounds work and why (because I did not understand them) before I apply them.
I tried to readonly the input field but then the modal does not open. I tried adding a second button and hide it (with display none) then trigger a click event on the readonly field and triggering the hidden button but that did not work either. I also tried adding a keypress event to prevent default but that only disables keyboard input on computers.
Javascript code for the events:
$('#datetime').keypress(function(event) {
event.preventDefault();
return false;
});
HTML code:
<div class="input-group date" data-target-input="nearest">
<input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime">
<div class="input-group-append" data-target="#datetime" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
I expect the modal from mobile to pop up but instead both modal and keyboard opens up every time I need to enter a datetime.
Use the attribute readonly for avoiding mobile keyboard.
$('#datetime').datetimepicker({
ignoreReadonly: true,
});
input#datetime {
pointer-events: none;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
</head>
<body>
<div class="input-group date" data-target-input="nearest">
<input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime" readonly="readonly">
<div class="input-group-append" data-target="#datetime" 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/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
</body>
you have an option to ignore the readonly input and open datepicker on button click.
If you're using Tempus Dominus, you can set the option focusOnShow to false. Source
$('#datetimepicker1').datetimepicker({
focusOnShow: false,
});
Related
I took a bootstrap and jQuery datepicker online since it was easier for me, it worked perfectly on localhost, but now after uploading it online, it doesn't work, I click on the input, and usually a calendar would pop up, now I just have a plain text input.
This is the full file where I use the datepicker:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="css/reservation.css" rel="stylesheet">
</head>
<body>
<section class="book-a-table">
<h1 class="title">Book</h1>
<form action="choose-time.php" class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" name="name" type="text" required>
<label class="label" for="name">Ime</label>
</div>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date"/>
</span>
<input class="submit-btn" name="submit" type="submit" value="Choose time >">
</form>
</section>
I had some script for disabling dates, I removed it but I still had no changes, tried to modify it, no changes, I only get a blank input text form.
It might be blocked by your server since it violates the Content Security Policy directive.
Check whether it shows in Browser Console (Ctrl + Shift + i).
Best way is to download Bootstrap files (e.g. https://getbootstrap.com/docs/4.3/getting-started/download/), upload it to your server and add this in your html
<link rel="stylesheet" href="./css/bootstrap.min.css">
I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">
This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});
Updated fiddle
Source
I wish to use x-editable and bootstrap-datetimepicker on the same page, but not on the same element. When doing so, however, the css required for x-editable (bootstrap-editable.css) corrupts bootstrap-datetimepicker, and it looks like the first image below instead of the desired second image. Note that x-editable's JavaScript has not even been included on the page, thus it must be just the bootstrap-editable.css.
To troubleshoot, I used Chrome's and Firefox's inspector to see what CSS is applied, however, when drilling down in the element tree, the JavaScript generated div.bootstrap-datetimepicker-widget automatically closes which prevent's the Chrome dev-tools from being able to view the CSS which is applied to it.
How can the CSS which is applied to this element be determined so that some sort of fix be created?
https://jsbin.com/yanawuv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker#4.17.47/src/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</body>
</html>
I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
I am new to JQuery Mobile and Javascript in general, so I am trying to learn it by doing a project. I am using JQuery mobile to design a web app and I require a few text inputs. In the JQuery documentation, there are text input examples that have a blue halo when they are clicked, and when the mouse moves away, the blue halo vanishes as well. I copied the provided code, but my text box does not have the same effect. I then tried inspecting the elements in the documentation and I realized that when the text box was clicked, the text input element gained an attribute called "ui-focus". How is this done?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" />
</head>
<body style class="ui-mobile-viewport ui-overlay-a">
<div role="main" class="ui-content">
<label for="basic">Email:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
<label for="basic">Password:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
</div>
</body>
You have copied rendered HTML code. JQM wraps input with a div to give it a new look. You don't have to add any extra code, only input tag, JQM will take care of the rest.
<input type="text" />