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>
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.
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>
So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing.
I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
I ran into a similar issue - in my case in the jQuery wiring $('#someid').datepicker() 'someid' was the id of the 'input' and where it should have been of the container div. which means - it worked when you click the input box but not the glyphicon button.
I have a working copy fiddle is here :
jsfiddle
The jsfiddle code is here : (Note: the reference to jQuery 2.0.2 and also the external reosurces tab in jsFiddle editor)
http://jsfiddle.net/Lro8kxjx/6/
<div class="col-xs-6 ">
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
}); });