I have added a jQuery datepicker to my MVC application and it seems to be working perfectly in all browsers except for Internet Explorer.
On click of the cell the calendar control appears but clicking through the months using the navigation icons seems to stop after varying amount of clicks. The date cells then become unclickable and I am unable to set the date.
Has anyone ever seen this issue before? And if so was there a solution available?
My javascript code is as follows:
$(document).ready(function () {
$('#expirydate').datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true });
});
And my HTML is as follows:
<label for="expirydate">Expiry Date:</label>
<input type="text" id="expirydate" class="datepicker" name="expirydate" /><br />
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 am using jquery ui-datepicker in my website. After selecting the Date calendar was not closing this issue only in IE browser but it works in other browsers.
I tried autoClose and change event to close the calendar but it is not working
<input type="text" placeholder="mm/dd/yyyy" class="custom-input-text" id="datefiled">
$("#enrich_end_date").datepicker({
changeMonth: true,
changeYear: true,
autoclose: true
});
I have a Bootstrap Datepicker in use on a web app. It works fine in all browsers except FF. Interestingly there are no JS errors in FF, but what I do notice is my input field is turned from type=text to type=date, no calendar popup works, and the date format I place in it is ignored.
My HTML:
<input type="text" class="date-picker form-control" name="expense_date_editable" id="expense_date">
In FF Inspect it appears as:
<input type="date" class="date-picker form-control" name="expense_date_editable" id="expense_date">
My init JS for the datepicker:
$('#expense_date').datepicker({
orientation: "bottom auto",
clearBtn: true,
todayBtn: true,
autoClose: true
}).on('changeDate', function(e) {
// do stuff...
}).on('clearDate', function(e) {
// reset date
});
Any help is appreciated.
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.
Here is my website- http://www.danfords.com/
I use jQuery datepicker on top right Arrival & Departure field.
With the same code in Tablet/Smartphone view datepicker works perfectly but in my pc that doesn't work.
Code-
<fieldset>
<label for="arrival">Arrival</label>
<input type="text" id="datepicker" name="DateIn"/>
</fieldset>
<fieldset>
<label for="departure">Departure</label>
<input type="text" id="datepicker2" name="DateOut"/>
</fieldset>
You have two elements with the same id datepicker repeated for your tablet and PC html elements. If ids repeat, jQuery works only with the first match. Since your tablet element is placed first, it works on the tablet and not on PC.
Add this in your footer html to work on pc.
$(function() {
$( "#datepicker" ).datepicker({
'changeMonth': true,
'changeYear': true,
});
$( "#datepicker2" ).datepicker({
'changeMonth': true,
'changeYear': true
});
});