How to use datepicker while creating dynamic HTML page - javascript

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?

Related

How can I get the selected date from datepicker to the method in backend

I have a datepicker in my UI. using that I can select date. My probelem is how can I get that selected date into my backend which is developing in java.
Can it do using javascript or any other method.
This is my code
<input type="text" class="form-control pull-right" id="datepickerlog">
<script>
$('#datepickerlog').datepicker()
</script>
var selectedDate = $("#datepickerlog").val();
This will read the date from your text input and assign it to the variable "selectedDate".
Edit: Place it inside your datepicker like this to assign date to variable when datepicker is closed:
$('#datepickerlog').datepicker({
onClose: function (dateText) {
var selectedDate = $("#datepickerlog").val();
}
});
Edit #2: To avoid problems with your script not doing what you expect, I suggest putting all jQuery code inside this function:
$( function() {---your code here---});
This way you can be sure that your script only runs after the page is loaded and ready for script execution.

add class to input field if name is x

In my website load a js file from commercial service, so I don't have possibility to customize this file, the output of this is a form with various input field, every field have the same class name "wf-input", now I want add to a specific field a jquery date picker but don't have a class for select only a one field.
This is a field I want add a datepicker
<input type="text" name="x4" class="wf-input">
Now my request is how add a class name to only this field?
The only difference between field is (name="x4).
The code for initializing datepicker is this:
$(function() {
$( ".x4picker" ).datepicker();
});
How make this work with javascript??
The following should do it.
$( "input[name='x4']" ).datepicker();
and if you still want to add class
$( "input[name='x4']" ).addClass('x4picker').datepicker();

How to incorporate a datepicker in an innerHTML

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

JqueryUI Datepicker: Uncaught TypeError: Cannot read property 'settings' of undefined?

I am developing a asp.net MVC4 project where i use lots of JqueryUI datepicker.
For one of my date picker when i tried to click on datepicker image i am getting some error like,
Uncaught TypeError: Cannot read property 'settings' of undefined jquery-ui-1.10.3.min.js:9
Html
<div>
<input type="text" id="tsDte" style="font-size: 14px;width: 50%" >
<img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>
Javascript
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
function tsDatePickerClick() {
$("#tsDte").datepicker('show');
}
Here i have a Textfield and a datepicker image.When i click on datepicker image datepicker will popup .
i have followed the similar way in other datepicker and they are working fine.I have only problem with this date picker.
Any help is appreciated.
That same error will be shown if you try to open a datepicker on an input field who has the class "hasDatepicker" assigned. Simply remove this class in the html.
Before:
<input type="text" value="01/01/2014" class="hasDatepicker">
After:
<input type="text" value="01/01/2014">
I think your datepicker wasn't created correctly, so when you call show, it expects a settings object.
Probably you didn't create it inside $(document).ready, you should have:
$(document).ready(function(){ //Add this line (and it's closing line)
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
});
Hope this helps. Cheers
You are including the jquery-ui-1.10.3.min.js library.
Your issue is caused by duplicating your jQuery UI core scripts.(check if you are including any other librady such as jquery-ui-1.10.3.drag-drop.min.js .
Load just them once, and your issue will go away.
On refreshing the page, you need to remove class 'hasDatepicker' and then set the settings (again). On refresh, the class is kept and so the datepicker is not recreated.
In my case, this was caused because I had an span with id date and the input had the same id. Giving the input a different id solved the problem.
Had the same issue because I had both
#Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { #class = "DatePicker" })
and
#Html.HiddenFor(m => m.StartDate)
in the same form on my view.
The accepted answer is probably the solution for most people, but This can happen when the picker is properly initialized but another element higher up in the DOM has the same id as your date input element.
You can check if that's the case by querying for this in your browser's console: $('*[id=my-id]');
The code for this datepicker is fairly old and therefore doesn't follow the best practices - it relies on the id attribute when it should really have just tracked the original DOM element reference, but it is what it is.

datetimepicker does not appear for dynamically created field in phonegap android

I am creating an input field dynamically to display the datetimepicker.when i create the field in the body and give class='datetimepicker' then it display the datepicker in the app but when tried to create a field dynamically and give class name datetimepicker it doesnot display the datepicker can any one tell me whats the issue.
here is code for date time picker:
var input_date=$(document.createElement('input')).attr('id','brthdate');
input_date.attr('class','datetimepicker');
input_date.attr('onclick','displaydate()');
input_date.attr('type','text');
input_date.appendTo('#contentDemo');
$('#demopage').trigger('create');
function displaydate(){
$("#brthdate").datetimepicker();}
here is the list of js files used for datetimepicker:
jquery.mobile-1.3.1.min.css"
mobiscroll.css"
jquery.js jquery-ui.js
jquery.mobile-1.3.1.min.js
jquery-ui-timepicker-addon.js
mobiscroll.js
application.js
Try like
var input_date=$(document.createElement('input')).attr('id','brthdate');
input_date.attr('class','datetimepicker');
//input_date.attr('onclick','displaydate()');
$("#brthdate").datetimepicker();
input_date.attr('type','text');
input_date.appendTo('#contentDemo');
$('#demopage').trigger('create');
Or just directly use its class name on DOM READY like
$(document).ready(function(){
$('.datetimepicker').datetimepicker();
});
And then create the new element
You can do this using below code.
var input_date=$('<input/>').attr('id','brthdate');
input_date.attr('class','datetimepicker');
input_date.datetimepicker();
input_date.attr('type','text');
input_date.appendTo('#contentDemo');
$('#demopage').trigger('create');
Demo

Categories