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.
Related
I need to enable a textbox based on the date change in jQuery Datepicker. So I have written a code like this:
HTML Code:
<div class="col-lg-3">
<div class="form-group">
<label for="support_due_date" class="form-label">Due date if any</label>
<div class="input-group date" data-target-input="support_due_date">
<input type="text" id="support_due_date" name="support_due_date" class="form-control datetimepicker-input" data-target="#support_due_date" value="<?php echo set_value('support_due_date');?>" />
<div class="input-group-append" data-target="#support_due_date" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<?php echo form_error('support_due_date'); ?>
</div>
</div>
$("#support_due_date").datepicker({
onClose: function(){
$("#justify_urgency").removeAttr("readonly");
var todays_date = new Date().toISOString().split('T')[0];
}
});
Once I click on datepicker, it gives calendar popped up and if I click on a date then it gives another datepicker without any CSS, just green color dates.
Why this calendar pops up twice?
I am using AdminLTE theme so daterangepicker and calendar are the js provided from AdminLTE theme only.
Image of error
Initial Page looks like this
Once we click on calendar, it gives this weird calendar again
When I select date again, it enables textbox to the right
Cross verify your code with below points. It may be due to below issues.
Input datepicker must be in type "text".
Make sure you are using only any one datepicker plugin css and js(bootstrap-datepicker/jquery-datepicker) files.
Also make sure the js file order is in correct order.
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();
}
});
I am using http://eonasdan.github.io/bootstrap-datetimepicker/ for calendar. Now I want to pick the selected date by the user. I am stuck with this calendar. Please help me to get the current selected date by the user I have used js to get the value.
On each date there is a class named "day". Now I wanted to get the value of the attribute "data-day" which have the value of the date as follows:
$(".day").click(function(){
var clicked = $(this).attr('id');
alert(clicked);
});
It returns the attribute's value only one time it's not recognizing the second click.
Please help me with js or this eonasdan plugin.
HTML
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-4 col-xs-6">
<input type="text" class="form-control" id="datetimepicker2" />
<br>
<input type="button" class="btn btn-success" id="getDate" value="Get Date" />
</div>
<span id="SelectedDate"></span>
</div>
JS
$('#datetimepicker2').datetimepicker();
$('#getDate').click(function () {
console.log($('#datetimepicker2').data('date'))
$('#SelectedDate').text($('#datetimepicker2').data('date'))
})
DEMO
Get Only Date Part
I have found methods for calendar described at linked page.
So for example to see what have user entered you have to:
$('#datetimepicker').data("DateTimePicker").date()
input here your id and as result receive object which has '_d' field with value.
data('DateTimePicker')
also has a lot of taste functions to configure plugin.
i think i might have the solution for you.
$('#datetimepicker1').data('date')
Please have a go.
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 use in my web app datepicker jquery but it I have some problem:
I have two tabs in one of them I have two menu, were I use datepicker in each other of menu.
And second tab has one menu and there I also use datepicker.
When I load my web page, and try to set some date with datepicker it is work (datepicker was opened). But after that I go to the second menu in this tab or another tab and try to set some date in my input date, but datepicker not opens. I also use ajax in this page.
Whats wrong? thx!
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" name="dateTime" id="dateTime" placeholder="yyyy-mm-dd" required />
<script>
$(function() {
$("#dateTime").datepicker({ dateFormat: "yy-mm-dd" , changeMonth: true });
});
</script>
The problem is the selector
$("#dateTime")
ID in a page is supposed to be unique
Use classes instead.
Because you are using a ID selector it tried to find the first instance of the element. Once it finds it, stops searching again. So it will never be applied to the element in the other tab..
Change
<input type="text" name="dateTime" id="dateTime"
to
<input type="text" name="dateTime" class="dateTime"
And then change the selector to
$(".dateTime")