How to incorporate a datepicker in an innerHTML - javascript

I have a php page that reads data from a Mysql table and displays it in a HTML table. I then use AJAX to allow the user to update the data, one row at a time. For text fields, that works fine.
However, one of the columns is a date. I would really like the user to select the date from something like JQuery’s datepicker but I cannot figure out how to do it.
The initial data table has the following line to display the current date field:
echo "<td><div id=$eventdate_id>$row[eventdate]</div></td>";
I then modify this line using Javascript to make a field the user can edit:
document.getElementById(eventdate_id).innerHTML = "<input type=text id='" +data_eventdate + "' value='"+ eventdate + "'>";
Part of my problem is that the datepicker uses the id of the HTML element but I am already using it…
Any idea how I can add the datepicker?
Thanks

Assuming you're using https://jqueryui.com/datepicker/, after you set the innerHTML you could do it like this:
$( "#"+data_eventdate ).datepicker();
Or you could add a class to the input (<input class="date_input" type=...) and add datepickers to all of them in one go:
$( ".date_input" ).datepicker();
You can include options in the individual datepicker( {/*options here*/} ) calls, or you can set defaults for all datepickers at the start of your code with $.datepicker.setDefaults() (example from datepicker documentation):
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});

I don't see an issue with the id, but I think it would be better to use a class. Then you can convert all of the dates to input elements and instrument them with datepickers all at once.
echo "<td><div class='date'>$row[eventdate]</div></td>";
You can then use:
$('.date').html(function(i, date) {
// The "date" parameter is the current text inside the div.
// Create the input element.
var $input = $('<input type="text"/>').val(date);
// Instrument the input element with a datepicker.
$input.datepicker();
// Return the input element so it is placed in the div.
return $input;
});
jsfiddle

Related

javascript onclick create element (label)

I am currently developing a webapp, draft link: http://webtrickssolutions.in/ayna/new-Building.html#
i have problem with javascript coding, when pressing on "OK" button, it should add a row underneath the filled data "Language" and "Text" / the new row should be Label. for example if i added two times:
English "BuildingName01" (delete icon)
Arabic "XXXXX05" (delete icon)
and it should remove the English and Arabic from the drop down menu as i cant select the language twice.
current javascript code is:
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');
var appendTxt = "<tr><td><select class='form-control form-control-bottom lang' name='input_box_one[]'><option>Language</option><option>English</option><option>Hindi</option></select></td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='add' value='Ok' /></td></tr>";
$("#options-table tr:first").before(appendTxt);
});
});
</script>
On click of the OK button you can remove the particular option:
var item = "Hindi";
$("select option:contains('"+item+"')").remove();
If you want to remove the specific element, this can be removed via
$("#selectBox option[value='English']").remove();
However, for this to be dynamic, you would have to first grab the value of the selected index:
var option = $('#selector :selected').val()
Following, remove this using a dynamic selector, like:
$("#selectBox2 option[value='" + option + "]")
EDIT: Updated Post:
I'd suggest that, the further down you go the more complex this object will be to maintain. Therefore, I suggest that instead of dynamically adding the element through a string, like so, you instead generate it using an array. This can be seen in this Fiddle. Obviously, this uses a newer version of jQuery, so can replace the 'On' with the 'Live' method.
This works by firstly creating a new select element:
var newSelect = $('<select/>');
Then, adds each element from the current dropdown as options to this select
$(this).parent().find("option:not(:selected)").each(function() {
newSelect.append($('<option/>').html($(this).val()));
});
& Finally appending this to the document
$("#options-table").before(newSelect);

How to use datepicker while creating dynamic HTML page

I am creating a dynamic HTML page in main.js using jquery mobile.
I want to use the date picker for one of my dynamically created HTML input element. When i click the text box against the Target Release field, I want a date picker to be displayed.
My dynamic page (main.js):
var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' /> rest of my HTML elements goes here");
newPage.appendTo($.mobile.pageContainer);
$.mobile.navigate("#newPage1");
I have added the below code snippet in main.js
$(function () {
$( "#rel" ).datepicker(
{dateFormat: 'MM yy'}
);
});
I have even tried writing the code as below.
`var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' />"+
$( "#rel" ).datepicker(
{dateFormat: 'MM yy'}
);
+"rest of my HTML elements goes here");
newPage.appendTo($.mobile.pageContainer);
$.mobile.navigate("#newPage1");`
But I am not getting the calendar widget.
I have tried the same code logic in index.html. It is working fine. Please let me know the reason why it is not working in main.js.
Datepicker widget cant be used while creating pages dynamically?
Thanks in Advance!!
You are not getting the widget because you apply the datepicker before the content appear. When adding new content you have to apply the datepicker again.
Check out this answer for better explanation.
Event binding on dynamically created elements?

Select input by name with Jquery

I'm adding this input field via an external .js file on clicking a button. This is added every time a button is clicked.
<input name=​"new" id=​"date" type=​"text" value>​
I want to append the Jquery-ui datepicker to this field.
Here's the code I'm using right now but class="hasDatepicker" isn't getting associated with the new field that's added when I inspect it using the console.
$('[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
I want to select this by name and not id as the id's will be unique for each field that's added.
The datepicker is added to other fields on my page so it should work here as well.
I also want to append class="btn btn-darkgrey" to make the input field into a button via Jquery.
Try like
$('input[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Working FIDDLE
As you said every time input field added when button gets clicked.
so , where you added the new input field at that place you have to initialize input with datepicker. That means on button click, you added code to insert new input field below that you have to find input by
$input = parent_element.find('input[name="new"]').last().
Here parent_element = in which you are appending/inserting your new input.
And initialize that input.
$input.datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Try this. hope it will work for you.

How to clone jQuery Datepicker input field

I need to clone a jQuery datepicker input field attached a datePicker to it using the on statement.
$('form').on('click', '.datepicker', function(){
$(this).datepicker({'changeMonth': true, 'changeYear': true, 'dateFormat': 'MM dd', 'yearRange': "<?php echo date('Y') ?>:<?php echo date('Y') + 1 ?>"}).focus();
});
Then before cloning the input filed, I am destroying the datepicker using
$(".datepicker").datepicker('destroy').removeClass('hasDatepicker');
But still the datepicker that is being attached to then newly cloned input is messing with original input field...
Can anybody please help me on this topic?
try this
var $clone=$(".datepicker").clone();
$clone.datepicker("destroy");
$clone.removeAttr("id");
$clone.datepicker();
$('form').append($clone);
when you clone a row it copies every thing,
and when the date picker is added again it calls the input by id, you must remove the id so that the next datepicker can assign a new id to the input :)
You should destroy the datepicker for the clone element like,
var $clone=$(".datepicker").clone();
$clone.datepicker('destroy').removeClass('hasDatepicker');
$('form').append($clone);

in jquery datepicker can add alt field with classname?

hi I am using jquery ui datepicker
in starting i set datepicker with following way
$(".td-datepicker).datepicker();
class .td-datepicker apply on four input text box and their id are following
#startdate
#enddate
#edit_startdate,
#edit_enddate
now i want to set alt field in all four input field
how can i add by class because if i add by id then repetition of code occur
like below
$('#startdate').datepicker("option","altField","#alt_startdate");
$('#startdate').datepicker("option","altFormat","mm/dd/yy");
$('#enddate').datepicker("option","altField","#alt_enddate");
$('#enddate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_startdate').datepicker("option","altField","#alt_edit_startdate");
$('#edit_startdate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
and can i add multiple option in datepicker after initialization
like for
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
can i write code for above two line in one line . is this any way ?
To change the altFormat on all of them, assuming they've the same format:
$(".td-datepicker").datepicker("option", "altFormat", "mm/dd/yy");
For the multiple options at once (example):
$(".td-datepicker").datepicker("option", {
disabled: true,
dateFormat: "dd/mm/yy"
});
To solve your issue, based on the ids you're using:
$(".td-datepicker").each(function (idx, el) {
$(this).datepicker("option", "altField", "#alt_" + $(this).attr("id"));
});
If you change your mind, yes, you can use classes instead.
It's all on the API documentation: http://api.jqueryui.com/datepicker/

Categories