I have a JS function which I want to call when a date or time input is changed.
With the following element, the function is called. I determine this on the basis of the fact that when I run the page in chrome with the devtools debugger open, I stop at a breakpoint at the beginning of the function. These elements are defined on a asp.net webform page.
<script type="text/javascript">
$(function () {
$('#airPickupdateInput').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});
});
</script>
<input id="airPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
<input type="text" id="airPickuptimeInput" class="timepicker" placeholder="Pickup Time" runat="server" onchange="GetTZ($('airPickupdateInput').val(), this.val())" />
When I choose a date from the datepicker element named airPickupdateInput the function is called as expected. However, when I change the value in the input text box airPickupTimeInput the function is not called.
Furthermore, in a separate area of the same form, I have another pair of date/time inputs, defined as follows:
<tbody>
<tr>
<td>
<script type="text/javascript">
$(function () {
$("#gndPickupdateInput").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#gndPickupdateInput').val());
});
});
</script>
<input id="gndPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
</td>
<td>
<input id="gndPickupTimeInput" class="timepicker" type="text" placeholder="Pickup Time" runat="server" onchange="GetTZ($('gndPickupdateInput').val(), this.val())" />
</td>
</tr>
</tbody>
In this case, neither the date input nor the time input call the function on change. Furthermore, the datepicker widget is not activated. The only difference I can see is that second group of input elements is held in a table. Is there any reason that should make a difference?
Clarification
I attached the datepicker to two different elements, one with id =gndPickupdateInput, and one with id=airPickupdateInput. I expect the timepicker elements to trigger the function because of the "onchange" value.
In short, I have 3 questions:
Why is the function not called by either of the timepicker elements?
Why is the function called in the first datepicker case, but not the second?
Why is the datepicker widget not activated in the second case?
ID of an element must be unique, So if you want to group multiple elements together with a selector use another attribute like the class.
In your case I think all the datepicker inputs has the class datepicker so use that class to select all datepicker input elements.
$(function () {
$('.datepicker').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});
});
then
<input class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
When you use an id selector, it fetches only the first element with the given id that is why in your case the first element got the datepicker, not the rest.
ID in HTML must be unique.
You can specify a common class then you can use Class Selector (".class").
As you already have added a common class(timepicker) use it. I would recommend you to use:
$('.timepicker').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});
Related
I have a date selection element
#Html.RadioButton("radioTimeFilter", "range", false) Date Range
<span id="dateRangeControls" style="display:none;">
<input id="txtDateOneFilter" type="text" style="width: 70px;" value="test" #*placeholder="Start Date"*# /> to
<input id="txtDateTwoFilter" type="text" style="width: 70px;" value="test" #*placeholder="End Date"*# />
</span>
and on document ready i'm trying to set these values being passed from another page
$(document).ready(function () {
$("#timeFilter").val("#ViewBag.timeFilter").change();
console.log("#ViewBag.dateStart");
console.log("#ViewBag.dateEnd");
// below fails
$("#txtDateOneFilter").attr("value", '#ViewBag.dateStart');
$("#txtDateTwoFilter").attr("value", '#ViewBag.dateEnd');
//
$("#ddlDistrictFilter").val("#ViewBag.districtId").change();
});
i've tried .val() and using .change() and a bunch of other things. Nothing seems to work. How can I change these values after the page loads
Check out this example:
https://stackblitz.com/edit/js-ptckvo
Copy the code and modify the dateOne and dateTwo values with the ViewBag (keep the quote marks inside the val):
$(document).ready(function() {
$("#txtDateOneFilter").val('#ViewBag.dateStart');
$("#txtDateTwoFilter").val('#ViewBag.dateEnd');
});
If it doesn't work, maybe the problem is in the ViewBag values.
I have a simple button:
<input type=button class=datepicker value='Select Date for payroll' />
<input type=button class=datepicker value='Select Date for ?' />
<input type=button class=datepicker value='Select Date for >' />
and I have a jQuery's Datepicker attached to it:
$('.datepicker').datepicker();
But the default action is to change the text/value of the button when a date is picked. I want to leave the default value. Is this possible?
I have multiple buttons which need to open a datepicker. When the date is selected on the Datepicker, it will fire a function and deal with the value. But I do not want the value choosen to be updated anywhere.
It must be fired on a button click.
You can use the shownOn-option of the datepicker-widget:
jQuery
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
onSelect: function(dateText){
alert(dateText + ' selected');
}
});
Note: the parameter of the function of onSelect is always of type string
HTML
<input type="hidden" id="datepicker" />
Demo
Reference
buttonText
datepicker - icon trigger
onSelect
You can hide the input and use the showOn attribute
HTML:
<input style="display:none;" type=button id=datepicker value='Select Date' />
JS:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date"
});
DEMO: https://jsfiddle.net/ogavr7gq/2/
You could try something like this:
HTML:
<input type="hidden" id="datepicker" />
JavaScript:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date"
});
$("#datepicker").on("change", function(e) {
e.preventDefault();
e.stopPropagation();
alert("Changed to: " + $(this).val());
});
Fiddle here: https://jsfiddle.net/robbyn/9oq2wp8j/
i've got a probleme with my date picker. I need to custom this datepicker but when i try to custom them it doesn't work.
Example:
I have this html code:
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" data-target="#job-date_start" name="date_start" title="" id="datestart" class="xlarge required" readonly>
<input type="hidden" id="job-date_start" value="" name="job[date_start]" />
</div>
And on javascript i try that:
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
},
});
And my problem is, when i click on a date in my datepicker the console.log(test) don't appear.
Thanks you
Inlcude jquery and jquery ui libraries and then on document ready add your code http://jsfiddle.net/m443no17/
$(document).ready(function () {
$('#datestart').datepicker({
onSelect: function (date) {
alert(date);
},
});
});
Ofcourse , it will work the way you wrote . But , is not needed if you are having only one helper.
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
}
});
Hope you have imported all the libraries required for datepicker and ofcourse jQuery proper version.
FYI :- Your DOM should be ready before you are executing this script
I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!
Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});
I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline
Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me
The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/
you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it