I have two input fields, one is directly coded inside html page and other is appending through JavaScript, and I have initialized jQuery datepicker for both fields with different id's.
I'm using jQuery ui datepicker
one input field in html page
<input id="datepicker1" name="" type="text" value=""class="form-control" placeholder="dd/mm/yyyy">
other in appending through javascript code
var datepicker2 = '<div class="control-group"> <label class="control-label">Cheque Date</label><div class="controls"> <input placeholder="DD/MM/YYYY" id="datepicker2" name="" type="text" onkeyup="" class="form-control"> </div> </div>'
$("#drop1").html(datepicker2);
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
Problem is the datepicker is showing with static input field in html page and not showing in dynamic field while appending through JavaScript.
Is it possible to intialize datepicker for dynamically generated fields?
It seems like you never add datepicker2 to the document. If this is the case you have to call something like this
$('body').append(datepicker2);//You may replace 'body' with '#drop2' or whatever is your container
before
$( "#datepicker2" ).datepicker();
See: http://codepen.io/8odoros/pen/xOqyQm
Try the following code.
Add a common class .date_picker to input field and add the following javascript
$('body').on("click", ".date_picker", function(){
$(this).datepicker();
});
Related
I have initialized datepicker on input type element.
On clicking any dates, it automatically redirects to base-url of the project.
localhost/my-project/#
I have used the plug-in other pages too but it worked fine.
Here's the input element. This element gets hidden initially, and later displayed via javascript.
<input class="editInput date form-control input-sm" type="text" name="date" value="<?php echo $menu['date']; ?>" style="display: none;">
jquery DatePicker initialization:
<script type="text/javascript">
$('input[name="date"]').datepicker({
dateFormat: 'yy-mm-dd'
});
</script>
Could it because the element is hidden initially in DOM?
How do I fix it?
Find The class 'ui-datepicker-next ui-corner-all' in jquery-Ui
then you can see the anchor tag now you just need to add href='#'
I'm using an input of the type date. I would like to know if there is a way to make the datepicker selection panel opened by default when the user enters in the page.
The element look like this:
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true">
Did you try adding autofocus
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true" autofocus="autofocus">
By using following funtion date picker will open bydefault after screen load.
$(function() {
$( "#starting_date" ).datepicker();
$( "#starting_date" ).datepicker("show");
});
You can display it embedded in a webpage by calling it on div instead of input, as per official documentation.
I am calling the content of a PHP file via AJAX similar to this:
NEW.PHP
$output = '<p>Date: <input type="text" id="field_1"></p>
<p>Date: <input type="text" id="field_6"></p>
<p>Date: <input type="text" id="field_7"></p>';
echo $output;
The inputs are generated dynamically depending on options the user selected. In this case, field_1 and field_7 would be date picker fields and field_6 would be a standard text box.
In my main page, the jQuery success handler looks like this:
success: function(result){
jQuery('#div-custom').html(result).show();
jQuery("#div-custom").find("#field_1,#field_7" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
}
The issue I'm having is that the number of date picker fields is dynamic and the field number field_X can be different. Is there a way to make this find("#field_1,#field_7") dynamic or use a wildcard? I can change my PHP code so that, for example, all date picker fields are called date_X and other fields are field_X.
In that case, I'd like to do something like find("#date_*) but don't know if that's possible. I'm definitely not strong with Javascript.
Really appreciate any help!
You should use a class as you can use the same class on multiple items unlike ids
<p>Date: <input type="text" class="cal" id="field_X"></p>
jQuery("#div-custom").find(".cal" ).datepicker({
If you rely completely on the ids, then you can use 'starts with' selector on the input elements.
$("#div-custom input[id^='field']").datepicker({
This would be applicable on all input with ids starts with 'field' within a div with id ='div-custom'.
I have a long html document with like a hundred of datepickers. Surely each has its own id in the form of (DueDate'num'), like "DueDate401":
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate401"/>
</div>
JS for processing event is as follows:
$(function() {
$( "#DueDate401" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
I have a vague idea that something like this should be used:
document.getElementById("DueDate"+id)
but not sure. Would appreciate assistance.
UPDATE: Oh yeh, the question)))) The above JS example shows how a reference is made to a SPECIFIC datepicker field. Since every next datepicker changes its id, I do not know how to change this Javascript to address all datepickers.
use class as well. name the input's class names as DueDate,
then you can use like this
$(function() {
$( ".DueDate" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
<input name="DueDate" class="DueDate" type="date" id="DueDate401"/>
The datepicker is tied to a standard form input field.
I would like to use Jeditable in order to tie datepicker to div element.
Some hints how to make it?
//html code
<input type="text" id="datepicker">
<div id="datepickerDiv"> get date </div>
--
// javascript script code
$(function() {
$( "#datepicker" ).datepicker(); // it works
$( "#datepickerDiv" ).datepicker(); // it does not work
});
References:
Jeditable
Datepicker