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
Related
I have an 'add' button that creates some dynamic textfields. The default start date and end date textfields displays the datepicker. However, the dynamically created textboxes are not displaying the datepicker. Any help would be appreciated.
$(document).ready(function() {
$('input[name="settings[start_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('input[name="settings[end_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
});
});
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>
You can quite easily add a datepicker to the newly-created elements
N.B. In this example I have taken the liberty of adding a "datepicker" class to your text boxes, to make the code simpler, so make sure you alter your HTML as well. I have also reduced the amount of repetition in your code by making the datepicker options into a re-usable object:
HTML/PHP:
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>
jQuery:
//I have assumed this, just for the sake of an example:
var constants = {
MAX_YEAR: "2020"
};
//re-usable set of options
var datePickerOptions = {
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
};
$(document).ready(function() {
//set datepicker on all existing elements with "datepicker" class
$('.datepicker').datepicker(datePickerOptions);
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
var pickers = row.find(".datepicker"); //find elements within the new row which have the "datepicker" class
//since we cloned them, remove the "id" attributes and "hasDatepicker" class, both of which were added by jQueryUI, otherwise the datepicker will not initialise properly on these new elements
pickers.removeAttr("id");
pickers.removeClass("hasDatepicker");
pickers.datepicker(datePickerOptions); //add a datepicker to each new element
});
});
You can also visit http://jsfiddle.net/yqr69eca/17/ to see a working demonstration of this code.
write your function like this
$(document).on('click','#targetid',function(){
/*Do something logically here*/
// On a side note it will always work on dynamic,static elements
});
Starting date and ending date are same. If change starting date automatically changed end date. Here my code
<input id="startingDate" class="datePicker form-control" name="startingDate" value="14-01-2017" type="text">
<input id="endingDate" class="datepicker form-control" name="endingDate" value="" type="text">
Javascript code
$(document).on('blur', '#startingDate', function(){
var date = $(this).val();
$("#endingDate").datetimepicker({
dateFormat: "dd-mm-yy",
defaultDate: date
});
});
What is my problem and how i can solve that problem ??
if you want to have the same value in endingDate when you leave your startingDate
you can do that's
<script>
$(document).ready(function(){
$("#startingDate").blur(function (){
$("#endingDate").val($(this).val());
});
});
</script>
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());
}
});
I need to use both timepicker and datepicker. But only one of them works. My code is mentioned below. I am using multiple jquery files.
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
</script>
Date : <input type="text" class="datepicker"/>
Time : <input type="text" class="timepicker"/>
Check Timepicker with Datepicker This one plugin has both pickers as a single component.
I used https://github.com/trentrichardson/jQuery-Timepicker-Addon
<link href="yourpath/jquery-ui-timepicker-addon.css'?>" rel="stylesheet" media="all">
<script src="yourpath/jquery-ui-timepicker-addon.js'?>"></script>
$(function() {
$( ".datepicker" ).datepicker();
});
$(function() {
$(".timepicker").timepicker();
});
and html
input type="text" name="date" value="" placeholder="Conference Name" id="datepicker"
input type="text" name="start_time" value="" placeholder="Starting Time" class="timepicker"
input type="text" name="end_time" value="" placeholder="Ending Time" class="timepicker"
it works for me.I think its jquery version problem
Make sure the library is loaded from CDN http://cdnjs.com/libraries/jquery-ui-timepicker-addon
Once the js and CSS are loaded successfully, you can use the plugin as per examples given in httpp://jonthornton.github.io/jquery-timepicker/. I used the following options to get AM/PM selector;
$('input.timepicker').timepicker({controlType: 'select',
timeFormat: 'hh:mm TT',
dropdown: true,
scrollbar: false,
ampm: true});
For detailed options list refer to httpp://timepicker.co/options/
2 links have httpp instead of http cz SO wouldn't allow me to post many links in one answer.
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