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
});
});
Related
I have a date picker that when I choose a new date I wish to fire another date picker on another input
Input one:
<input name="pDate" type="text" class="form-control date-with-time-inputs" onchange="changeDate()" id="p_date" placeholder="" value="{{$times['now']}}">
Then I have onchange event
<script>
function changeDate() {
const input = document.getElementById('d_date');
input.select();
console.log('clicked');
}
</script>
And then the second input as so
<input name="dDate" type="date" class="form-control date-with-time-inputs" id="d_date" placeholder="" value="{{$times['tomorrow']}}">
The console log fires and the function is working but the 2nd input is not firing up.
You can't open/click() it from JS(only focus() but that would not help you):
The HTML5 <input> with type='date' will only work with a few browsers.
Also, as a programmer you have no control over its appearance or any
other aspect (such as showing and hiding it) (Quick FAQs on input type date)
Thus, if you must do this, the HTML5 <input type='date'> tag is not an
option. You'll have to use something build in JavaScript such as
jQuery UI or Bootstrap date picker.
Found here: https://stackoverflow.com/a/18327043/12753766
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've got a question, got couple of input datepickers like
<input name="datepicker_one" class="datepicker" readonly type="text" value="12-12-2013" />
<input name="datepicker_two" class="datepicker" readonly type="text" value="13-12-2013" />
<input name="datepicker_three" class="datepicker" readonly type="text" value="14-12-2013" />
and I'm trying to get values of clicked datepicker, while trying to avoid writing different methods for each of those inputs, so I wonder if there is a way to get datepicker value just by clicking on input with class .datepicker like:
$(".datepicker").click(function(e){ $(this).val(); });
but this gives me undefined value also:
$(".datepicker").click(function(e){ $(this).datepicker("getDate"); });
Does not seems to work.
You aren't using your value. The statment:
$(this).val();
Is meaningless as it doesn't do anything. You get the value, but didn't use it. If you did
console.log($(this).val());
you would actually see the result.
Try this:
$(".datepicker").click(function(){
alert($(this).val());
return false;
});
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 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")