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.
Related
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 trying to create two date input fields by using jquery-ui's datepicker() function, bot fields have the id of "datepicker": <input type="text id="datepicker" name="publishUp"> and <input type="text id="datepicker" name="publishDown">
I tried to attach a function to the event focus as following, hoping to show the calendar only on the "activated" field, but it doesn't work. I am wondering where might be wrong?
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$("#datepicker").focus(function() {
$(this).datepicker();
});
</script>
Only showing when the input field is activated is the default behavior of the datepicker. Take the datepicker out of the event handler.
You shouldn't have multiple inputs with the same ID; the $("#datepicker") selector will only find the first one. If you want multiple datepicker inputs, use a class instead. So the HTML should be:
<input type="text" class="datepicker" name="publishUp">
<input type="text" class="datepicker" name="publishDown">
and the jQuery should then be:
$(function() {
$(".datepicker").datepicker({
// options
});
});
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.
How can we detect when a hidden form field was changed dynamically? If it was changed, then display an alert?
A JQuery UI (DatePicker) is used to change the hidden form field.
$("#datepicker").datepicker({altField: "#alternate", altFormat: "yymmdd"}).$('#alternate').trigger('change');
<input name="textbox" id="alternate" type="hidden" size="30"
onchange="alert('changed')" />
$('#alternate').change(function(){
window.alert('Change has happened. Ya dig?');
});
Solved it with help from two similar questions on StackOverflow.com
jQuery UI datepicker - Trying to capture click event from date clicked
jQuery - Detect value change on hidden input field
<input name="textbox" id="alternate" type="hidden" size="30"
onchange="alert('changed')" />
<script>
$(function() {
$("#myDatePicker").datepicker({
// The hidden field to receive the date
altField: "#alternate",
// The format for the date
altFormat: "yymmdd",
onSelect: function (date) {
// trigger the .change() event
$('#alternate').trigger('change');
}
})
});
</script>
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 />