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
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();
});
It works further down the page by itself, but when I put it in a div in a table it won't work.
The checkbox when ticked will show a date picker, but the checkbox does not show up unless an option from a dropdown is
My code:
javascript:
<script type="text/javascript">
$(document).ready(function(){
$('input[type=checkbox]').change(function(){
var checked = this.checked;
if (checked) {
$('.other').show();
} else {
$('.other').hide();
}
});
});
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
ASP page:
<td data-bind="visible: checkBool" style="width: 278px">
<input type="checkbox" id="endDateCheck"/>
Tick this box if there is an end date for the
permissions.
<div class='other' name='other' title='other' style='display:none;'>
<p>Date: <input type="text" id="datepicker"/></p>
</div>
</td>
Currently, the div called "other" is always hidden regardless of whether you tick the checkbox or not.
Are you using jquery or knockout for the solution? If you are using knockout you must first read here and then
see in this documentation about knockout checked binding and you will find your answer. Regards
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
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"/>
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' });});