I am trying to use bootstrap datepicker, got it working, now there are some usability issue left.
Is it possible the open the second datepicker in a daterange when closing the first one? I am not really good in js. would be great if anyone could help here..Link to Demo
Below is my code:
HTML:
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="form-control" name="start" />
<input type="text" class="form-control" name="end" />
</div>
JavaScript:
$('.input-daterange').datepicker({
format: "dd.mm.yyyy",
language: "de",
todayHighlight: true
});
On further investigation, I found myself that I messed it with jQuery datepicker.
Here in Bootstrap datepicker, there is no method like onClose() but using changeDate you can simply accomplish the issue.
$('#start').datepicker({
autoclose: true // This enable you to close the picker
}).on('changeDate', function (ev) {
$("#end").focus();
});
$('#end').datepicker();
FYI: To close your picker, you make use of autoclose property in bootstrap datepicker.
Here is a simple JSFiddle for you.
Related
I'm using Jquery-UI Datepicker "https://jqueryui.com/datepicker/" "I'm using it on two inputs" and when I click on an input and choose the date from the calender I want to make an effict on a sibling of the input, but I couldnt because the datepicker is created at the bottom of the html code. So I figured that if I could make it be created in the div that has the input I'll be able to control it's siblings.
So my question is "How I make it be created inside the dive that has the input?"
<div class="formss">
<div class="first-input">
<input class="input1" id="datepicker1" type="text">
<span>place holder</span>
</div>
<div class="sec-input">
<input class="input2" id="datepicker2" type="text">
<span>place holder</span>
</div>
</div>
JQuery UI Datepicker renders the calendar at the bottom. You don't have to worry about it because UI Datepicker provides every option to customize your input. You have calendar instance available. Below is an example, that makes the label of the clicked datepicker field to change color on selecting a date.
$(document).ready(function() {
$("#datepicker1").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: "yy-mm-dd",
onSelect: function(date, inst) {
setTimeout(function() {
inst.input.siblings().css('color', 'red');
}, 50);
}
});
});
Here inst,input points to the input field which is marked as datepicker field. Hope this helps you.
I have my code on js fiddle https://jsfiddle.net/9n3c8726/. The datepicker needs to show up as soon as I click on the field. As you can see I already encased it in a function. Any help would be appreciated
Javascript
<script>
$(function(){
$('.datepicker').datepicker();
});
</script>
HTML
<input class="datepicker" placeholder="Birthday" type="text" name="date">
<input class="datepicker" placeholder="Birthday" type="date" >
You need to include a datepicker library. Bootstrap does not come prebundled with one. Have a look at something like https://eonasdan.github.io/bootstrap-datetimepicker/
I have been able to successfully attach a datepicker to an input field. However, is it possible to also display the datepicker that is attached to the input after clicking the span field?
<div class="date_month">
<input class="date" id = "set_date_01" type="text" readonly>
<span class="date_icon"> </span></div>
I have looked around and could not find a good solution. Any help is appreciated!
I would try this:
$('.date_icon').on('click', function() {
$('#set_date_01').focus();
});
But you really should use a label with a for attribute instead of your span. You wouldn't need js then to achieve this effect and it would be great for accessibility.
For instance:
<div class="date_month">
<label for="set_date_01">
Pick a date
<input class="date" id="set_date_01" type="text" readonly>
</label>
</div>
It's hard to say for sure without knowing which datepicker you're using, but most jQuery date pickers will have events that you can trigger manually. So you would need to capture the click event for that span tag, and fire the datepicker's 'show the datepicker' event.
Here's some documentation describing what I mean when using the jQuery UI built-in datepicker:
http://api.jqueryui.com/datepicker/#method-show
DatePicker has an attribute named buttonImage:
$(".date").datepicker({
buttonImage: "/images/datepicker.gif",
showOn: "both"
});
showOn must be set to button or both in order for this to work.
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
})
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.