Jquery datepicker in django not working - javascript

I went through almost every question in this feed( I like to think so). But my jquery datepicker is not working. I dont know its been a while since im trying to make it happen and so i went through maximum tutorials and everything seems just fine with my code. Heres my code
<input type="text" id="datepicker" class="datePicker" readonly="true">
and my jquery:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
Do i need to include other script sources too?? This is all i have done and i dont know what went wrong. Somebodys gotta help me..

add the jquery-ui css in your link.
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css

And you should the delete readonly="true" of input.
<input type="text" id="datepicker" class="datePicker">

Related

How to show up a calendar with XD datetimepicker when initial screen works?

I am trying to use XD DateTimePicker to show up a calendar, using a code as a reference at the link DateTimePicker jQuery plugin select date and time . The title is "Inline DateTimePicker Example ". But, although each buttons appeared, the calendar didn't work.
Here is the code I use of Javascript:
$(function() {
$('.datetimepicker3').datetimepicker({
inline:true
} ;
})
HTML:
<input type="text" class="datetimepicker3">
Here is a picture of current result of mine:
I will appreciate if you could tell me how to manage it.
You are using a class instead of a ID to select the calenedar. It should be
$('#datetimepicker3').datetimepicker({ inline:true });
An you need that ID included in your HTML markup, example:
<html>
<body>
<div id="datetimepicker3"></div>
</body>
</html>
Do not forget to include JQuery before the datetimepicker library
does it make any difference when you put it in a doc ready? Example:
$(document).ready(function()
{
$('.datetimepicker3').datetimepicker({
inline:true
} ;
});
I feel like youre trying to run code before it's ready, meaning it won't work correctly.
As others stated, a proper code preview would help too.
I'm so sorry to bug you guys. I ended up expressing my current situation in codepen. Here is the thing.
HTML:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.full.min.js"></script>
<input type="text" id="datetimepicker3">
<script type="text/javascript" src="xd.js"></script>
Javascript:
jQuery('#datetimepicker3').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
Can't I put a link of codepen in this textarea? I was trying , but it couldn't. So, I wrote down my code directory.

How to fill in data in an input field using Javascript directly on page load?

This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){

Setting value of h:inputtext field using jquery script

I'm designing a page that is supposed to allow users to submit possible computing science projects and at one stage the user will have to enter a duration that the project will run over. To make things easier on the user the I'm trying to fill out the from: to: fields using jQuery's datepicker method however I cannot get the script to run when the user selects the appropriate field.
So far I've got the following script:
<h:outputScript library="jquery" name="jquery-1.9.1.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.min.js"/>
<h:head>
<title>Add project</title>
<script type="text/javascript" id="setDate">
$(function() {
$(" #datepicker ").datepicker();
});
</script>
<!-- rest omitted for readability -->
and my h:inputText looks like this:
<h:inputText id="setDate" value="" onclick="$('#datepicker').datepicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
I did try to make it work without using any jsf tags and managed to get it up and running but I just can seem to make it work with jsf tags.
The problem is that when in a browser the jQuery datepicker widget does not display upon clicking on the field. Clicking on the field defined using the standard <input> tag works correctly.
Any help is greatly appreciated, thanks.
<script type="text/javascript">
$( document ).ready(function() {
function openDatePicker(){
$("#datepicker").datepicker();
}
});
</script>
<h:inputText id="setDate" value="" onclick="openDatePicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
Hope this will work for you (havent tried it out).
I managed to solve my problem in the following way:
Changed my script to:
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
});
});
</script>
and my jsf tag to:
<h:inputText styleClass="datepicker"/>
Now the datepicker widget will display when I select the field. Thanks to DannyThunder for putting me on the right track.
This was the answer for me:
<script>
jQuery(document).ready(function($) {
$('#signup-form\\:email').checkEmailFormat();
});
</script>
And for Primefaces:
<script>
jQuery(document).ready(function($) {
$(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat();
});
</script>
I got the information from mkyong.com
Best regards

change and onchange don't work on my computer. what might be causing this?

The following code should pop up an alert box whenever I select a file or make a change to the textbox and click out of it.
I believe the code SHOULD work, but it doesn't. Isolating the code snippets on JSFiddle and running them even works.
Is anything wrong with my code? If not, could something on my computer be preventing this code from working?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
document.getElementById("file").onchange(function() {
alert($(this).val());
});
$('#text').change(function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<input id="file" type="file" name="file" />
<input id="text" type="text" name="text" />
</body>
</html>
Try wrapping your function in
$(document).ready(function() {
});
jsfiddle does this for you (I think)
Alternatively use:
$(window).ready(function() {
});
if you want to ensure that the entire page has loaded before trying to run your code.
Further reading:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Apply jQuery datepicker to multiple instances

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.
<script type="text/javascript">
$(function() {
$('#my_date').datepicker();
});
</script>
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>
Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID). I tried assigning a class to the text box and specifying:
$('.my_class').datepicker();
but while that shows a date picker everywhere, they all update the first text box.
What is the right way to make this work?
html:
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
script:
$('.datepick').each(function(){
$(this).datepicker();
});
(pseudo coded up a bit to keep it simpler)
I just had the same problem.
The correct way to use date pick is $('.my_class').datepicker(); but you need to make sure you don't assign the same ID to multiple datepickers.
The obvious answer would be to generate different ids, a separate id for each text box, something like
[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>
I don't know ASP.net so I just added some general C-like syntax code within square brackets. Translating it to actual ASP.net code shouldn't be a problem.
Then, you have to find a way to generate as many
$('#my_date[i]').datepicker();
as items in your Model.MyRecords. Again, within square brackets is your counter, so your jQuery function would be something like:
<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
<html>
<head>
<!-- jQuery JS Includes -->
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
<!-- jQuery CSS Includes -->
<link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>
<body>
<!-- Each input field needs a unique id, but all need to be datepicker -->
<p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
<p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
<p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>
</body>
</html>
There is a simple solution.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/flexcroll.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="../js/JScript.js"></script>
<title>calendar</title>
<script type="text/javascript">
$(function(){$('.dateTxt').datepicker(); });
</script>
</head>
<body>
<p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
<p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
<p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
</body>
</html>
When adding datepicker at runtime generated input textboxes you have to check if it already contains datepicker then first remove class hasDatepicker then apply datePicker to it.
function convertTxtToDate() {
$('.dateTxt').each(function () {
if ($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker');
}
$(this).datepicker();
});
}
A little note to the SeanJA answer.
Interestingly, if you use KnockoutJS and jQuery together
the following inputs with different IDs, but with the same data-bind observable:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />
will bind one (the same) datepicker to both of the inputs (even though they have different ids or names).
Use separate observables in your ViewModel to bind a separate datepicker to each input:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />
Initialization:
$('.datepick').each(function(){
$(this).datepicker();
});
The solution here is to have different IDs as many of you have stated. The problem still lies deeper in datepicker. Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div." This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.
Is there an option that can change this ID to be a class? I don't want to have to fork this script just for this one obvious fix!!
To change use of class instead of ID
<script type="text/javascript">
$(function() {
$('.my_date1').datepicker();
$('.my_date2').datepicker();
$('.my_date3').datepicker();
...
});
</script>
I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control. I was using ClientScript.RegisterStartupScript(), but forgot to give the script a unique key (the second argument). With both scripts being assigned the same key, only the first box was actually being converted into a datepicker. So I decided to append the textbox's ID to the key to make it unique:
Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
I had a similar problem with dynamically adding datepicker classes. The solution I found was to comment out line 46 of datepicker.js
// this.element.on('click', $.proxy(this.show, this));
In my case, I had not given my <input> elements any ID, and was using a class to apply the datepicker as in SeanJA's answer, but the datepicker was only being applied to the first one. I discovered that JQuery was automatically adding an ID and it was the same one in all of the elements, which explained why only the first was getting datepickered.

Categories

Resources