When I click on the text box or icon, I can't get the popup calendar to appear. I get no JavaScript errors and just can't seem to work out what the issue is.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#datetimepicker input').click(function(event) {
$('#datetimepicker').data("DateTimePicker").show();
});
</script>
<!-- in the body -->
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
Can anyone see what I'm doing wrong as I'm really confused now and can't seem to work it out.
Thanks
In document.ready you have to initialize the datepicker just use this
$("#datetimepicker ").datepicker({
dateFormat: 'd-M-yy'
});
and it will automatically show calendar when you click on input type
Ensure that you've correctly imported jQuery, jQuery DateTimePicker JS & CSS. Then use datetimepicker simply as following, no need of a click event -
$('#datetimepicker').datetimepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
Related
I am creating the input field to show the calendar date. Now I just only can click the input field to show the calendar date. Actually, I want to click the calendar icon to show the calendar date, then the calendar date will show in the input field, not click the input field to show the calendar. Hope someone can guide me on how to solve it. Thanks.
Below is my coding:
<div class="col-lg-12" style="margin-top:10px;">
<label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;"> *</span></label>
<div class="input-group col-lg-6">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
</div>
</div>
This is my output:
Actually, I want the expected result like below the picture. Can click the icon show the date then after choosing the date can show in the input field:
Try like this:
$(document).ready(function() {
$('.fa-calendar').click(function(){
$(document).ready(function(){
$("#document_date").datepicker().focus();
});
});
});
Here is the example
$(document).ready(function() {
$('.fa-calendar').click(function(){
$(document).ready(function(){
$("#document_date").datepicker().focus();
});
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-lg-12" style="margin-top:10px;">
<label for="text1" class="form-group control-label col-lg-2">Tarikh Surat:<span style="color:red;"> *</span></label>
<div class="input-group col-lg-6">
  <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input style="width: 97.5%;" type="text" class="form-control datepicker" id="document_date" name="document_date" value="" data-date-format="yyyy-mm-dd" readonly><br>
</div>
</div>
I would like to show a "$" placeholder always inside the input field that's for visual purposes only. How can I achieve this with JavaScript and my current setup.
<form action="#" accept-charset="UTF-8" class="needs-validation py-3" novalidate>
<div class="input-group">
<input type="hidden" id="date" name="date" value="" />
<input type="hidden" id="time" name="time" value="" />
<input
min="5"
type="number"
name="amount"
id="amount"
placeholder="$0.00"
class="form-control"
required
/>
<span class="input-group-btn">
<button class="donate-btn btn-primary ml-3 form-group">
DONATE
</button>
</span>
<div class="invalid-feedback ml-2">
Invalid Amount. Contributions must be at least $5.
</div>
</div>
</form>
Example of what I'm looking for:
My current solution:
You can use something like this for that effect without using the placeholder to load $ sign constantly.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" placeholder="0.00">
</div>
The link posted by the user "pl2ern4" helped me solve this problem. I needed to adjust the CSS of the input typed text as well
Adding dollar prefix to bootstrap input box
I'm using SB Admin template for my application. I want to add bootstrap date picker to my input. But somehow I'm missing the order of JS & CSS libraries loading order which I think is not working in my case as going through multiple articles.
Below is code in <html> section
$('#datetimepicker').datepicker();
<head>
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>
Thanks in Advance.
it's a conflict with moment.js as i know.look if moment have his own datepicker library.
I have a panel that contains a list of bootstrap switches, beside each there is a clockpicker.
what I want to do is, when the switch is changed to OFF, i want to prevent the default behavior (i.e. using preventDefault()) of the clockpicker so it is no longer triggerable.
I'm tried to simply disable the clockpicker, but it's not working at all:
$("#switch").change(function(){
if (this.checked == false)
{ $("#clockpicker1").prop("disabled", true") }
})
HTML structure for Clockpicker:
<li class="list-group-item-padding">
<div class="input-group clockpicker" id="ddd" data-placement="left" data-align="top" data-autoclose="true">
<input type="text" id="saturdayPicker1" class="form-control" value="15:00" />
<span class="input-group-addon" id="saturdayPickerSpan1">
<span id="saturdayIcon1" class="glyphicon glyphicon-time">
</span>
</span>
</div>
</li>
HTML structure for switch:
<li class="list-group-item">Sunday
<div class="material-switch pull-right">
<input id="sundaySwitch" name="daySwitch" type="checkbox" />
<label for="sundaySwitch" class="label-primary"></label>
</div>
</li>
Your example code has a syntax error, but it looks like you might have been using strings as the value with prop. You should use booleans for disabled (and checked and other boolean properties).
Responding to bootstrap-switch's switchChange.bootstrapSwitch event by setting the disabled property on the actual input for the clockpicker works:
// Workaround for clockpicker bug:
// You must do this *BEFORE* you initialize the clockpickers
$(".clockpicker .input-group-addon").on("click", function(e) {
if ($(this).closest(".clockpicker").find("input")[0].disabled) {
e.stopPropagation();
e.stopImmediatePropagation();
}
});
// End workaround
$(".clockpicker").clockpicker();
$("input[type=checkbox]").bootstrapSwitch().on("switchChange.bootstrapSwitch", function() {
// Find the associated clockpicker
var cp = $(this).closest(".switch-clock-container").find(".clockpicker");
// Enable/disable its input
cp.find("input").prop("disabled", this.checked);
// If disabling, close it if it's open
if (this.checked) {
cp.clockpicker("hide");
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<div class="switch-clock-container">
<input type="checkbox" name="my-checkbox">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="switch-clock-container">
<input type="checkbox" name="my-checkbox">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
I am trying to customize the calendar, but it seems that it is not taking into account the customization, such as displaying the today button or ignoring past dates. I tried the following:
in the head
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
in the top body
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
Then in the form:
<script>
$('.datepicker').datepicker({
startDate: 0,
todayBtn: "linked"
});
</script>
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
However, I still do not get the 'Today' button. I am not sure if the reason is because the javascript code is not correct? (not calling the calendar correctly) or misplaced?
Basically, your jQuery call with todayBtn option isn't really pointing to your input. The datepicker functionality you're seeing is based on your html. I moved the script after the elements (so it runs after the target elements are in the DOM) and changed the jQuery call to find the correct element. Also, I believe the startDate option should be a date so I changed it from 0 to '3/16/2016'. The original html is unchanged...
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control"
placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
$("div.input-group.date").datepicker({
startDate: '3/1/2016',
todayBtn: "linked"
});
</script>