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
});
});
Related
jQuery datepicker works fine on a static page, but I can't get it to work on a jQuery Dialog page. This is a wordpress site.
I know everything necessary is included because it works on a static page. The dialog page is triggered with a button click.
This is the code on the static page (working):
<input type="text" class="datepicker" name="datepicker" value="" />
Here is the input box on the dialog page, which is created dynamically (nothing happens when clicking in the input box):
<input type="text" value="" data_original_for_sale_date="" id="for_sale_date" class="datepicker">
Here is the jQuery code:
jQuery(document).ready(function($) {
$('.datepicker').datepicker({
dateFormat : 'mm/dd/yy'
});
});
Any help would be appreciated. (I'm a newbie...)
Update your jquery code by this
$(document).ready(function($) {
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
dateFormat : 'mm/dd/yy'
});
});
});
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 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.
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 />
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")