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"/>
Related
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();
});
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'.
This question already has answers here:
jQuery UI DatePicker - Change Date Format
(29 answers)
Closed 8 years ago.
I have a simple html form that asks for two dates to select, and on the next page they are used in a MySQL query. Problem is, datepicker uses mm/dd/yyyy as the format, and I need yyyy-mm-dd for MySQL.
Is there a simple way to do this? I don't care if the datepicker's format is changed, or if I have to add a middle step to convert it, but whenever I search for examples they all look way overly complicated and include stuff I'm not even using.
I don't think the code is really important since it's so simple, but here's what I have in the header;
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
});
</script>
And here's what's in the body;
<form method="post" action="stat_report.php">
<h1>Report Summary</h1>
Format: YYYY-MM-DD<br>
Start Date: <input type="text" name="startDate" id = "datepicker"><br>
End Date: <input type="text" name="endDate" id = "datepicker2"><br>
<input type="submit" value="Submit">
</form>
Like so: $('#someId').datepicker({ dateFormat: 'yy-mm-dd' });
This could solve your Problem: http://api.jqueryui.com/datepicker/#option-dateFormat
this is my problem i've this :
<script>$(function() {$( "#dataInizioBook" ).datepicker();});</script>
<input type="text" id="dataInizioBook" value="01/01/2013"/>
The datepicker will show another date selected when i click the input text.
Thank's for the help.
Try this in case your browser is configured to use different culture:
$(function() {$( "#dataInizioBook" ).datepicker({ dateFormat: 'dd/mm/yy' });});
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