I want make datetimepicker in my project. Using jquery how it is possible?
I have one text box, div and calendar. Once i focus on textbox, the calendar div gets fadein. Some way what i want to do is this: Once i click on calender the selected value should show in textbox and calender should hide. How?
Here is the code so far.
$(document).ready(function() {
$(".txtDateTime").focus(function () {
$(".CalenderDiv").fadeIn("slow");
});
$(".UserCalender").click(function () {
$(".CalenderDiv").fadeout("slow");
$(".txtDateTime").val("fdgfg");
// ================??????
});
});
This code once i click textbox calender will show. But in the case of Calendar click it is not working? Why....Please Help me....
Seems like you are re-inventing the datepicker widget from jQuery UI. Is that correct? Why not just use what works?
full code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple DatePicker example</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"></link>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type="text/javascript" language='javascript'>
$(document).ready( function (){
$('.pick-date').datepicker({clickInput:true});
});
</script>
</head>
<body>
<h1>jQuery UI datepicker example</h1>
<div class="inputDiv">
<p>Click in the box to select a date:</p>
<input id='b1' class='pick-date' value=''/>
</div>
</body>
</html>
demo: http://jsbin.com/ewime
You should checkout jQUeryUI's Datepicker widget: http://jqueryui.com/demos/datepicker/
The widget has got the functionality you are looking for.. and you do not have to create your own calendar.
Related
Here's the code from https://www.w3schools.com/HOWTO/tryit.asp?filename=tryhow_google_translate
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
But the situation I have is, that user enters text in a textbox in English, hit 'Translate' button and the other text box get translated text in Spanish.
I tried replacing 'google_translate_element' to 'es' or 'Spanish' but did not work.
Any suggestions?
Found solution from google support, so sharing for someone who might need it. You may use includedLanguages and list comma separated languages which you want to display in dropdown :
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
Hello guys I tried to do it myself but for this I didn't know what I had to do. So basically what I need to do is create a text field a button and a calendar. So I have done almost everything but I need to make it when a date is typed in the text field and I submit it the calendar updates. so far I only got the date in the text field when clicking on a date but this is not what I need. Any help is appreciated thank you
This isn't really a Classic ASP specific question, what you're really after is a Javascript date picker component. Something like this JQuery Datepicker will do exactly what you're after.
Usage:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I've been trying in vain for the last couple hours to learn History.js. I've created three extremely simple test files, but I can't seem to get anything working. Here are the contents of my three files.
history.html:
<!doctype html>
<html>
<head>
<title>History Test</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>
<script type="text/javascript" src="history.js"></script>
</head>
<body>
about
</body>
</html>
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
});
function handleStateChange() {
alert("State changed...");
}
about.html:
<!doctype html>
<html>
<head>
<title>About</title>
</head>
<body>
About...
</body>
</html>
When I click the 'about' link, why doesn't the statechange event fire or my handleStateChange() function execute?
I'll answer my own question in case it helps someone else. I was under the mistaken impression that the 'statechange' event would fire anytime the browser's URL changed (e.g. clicking a link or clicking the back button). What I discovered is that 'statechange' only fires when you push something onto the History. So I updated my JavaScript to add a listener to the link...
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
$("#about").click(function() {
History.pushState(null, null, "about.html");
});
});
function handleStateChange() {
alert("State changed...");
}
...and now I get the alert when I click the link and when I click the browser's back button.
I have a website written in C# / ASP.NET. I try to add loading/waiting window while that page is loading. How can I do that in Asp.net? Thanks..
I solved it with DOJO. I used dijit.dialog. Here is a part of my code:
<head>
<!-- api's (you can use also google apis: https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js) -->
<link href="<%=Url.Content("~/Scripts/dojo/dijit/themes/tundra/tundra.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<link href="<%=Url.Content("~/Scripts/dojo/dojo/resources/dojo.css")%>" rel="stylesheet"
type="text/css" media="screen" />
<script djconfig="parseOnLoad: true" type="text/javascript" src="<%=Url.Content("~/Scripts/dojo/dojo/dojo.js")%>"> </script>
</head>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.ContentPane");
// This is the function to show the spinning whell (or something else to demonstrate the loading progress)
function wheelShow() {
var dialog = new dijit.Dialog({ title: "Loading...", id: "wheel" });
dialog.setContent("<img style='height: 55px; width: 55px; text-align:center' src='../../Content/images/loader.gif' />");
dialog.show();
// hiding of close button in dialog
dojo.query("#wheel .dijitDialogCloseIcon").forEach(function(node, index, arr) {
node.style.visibility = "hidden";
});
}
</script>
<body class="tundra">
<!-- after the page will be completly loaded - hide the wheel -->
<div id="delayedContent" onload="dijit.byId('wheel').hide()">
<!-- your page content here... -->
</div>
</body>
I found something like that. It seems easy and practical to use :
http://www.codeproject.com/Articles/42344/AJAX-Enabled-MessageBox
Thanks for your answer by the way.
I have a text box called txtName on my form.
In my page I know I need to place the code in my HEAD tag like so......
<script type='text/javascript' language="javascript">
document.FormName.txtName.value = "Robert";
</script>
But I cant seem to set a value to my textbox txtName with the above code......
That's because your code get executed before the DOM is created.
You can do something like this
window.onload = function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
}
or use JQuery
$(function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
// for a shorter syntax use id
$('#txtNameId').val("Robert");
}
Your script executed before page loaded. Use onload event
Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.
UPDATE:
You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:
<body>
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
LoadTextBox();
</script>
</body>
An alternative could be where you use onload in the body tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
</script>
</head>
<body onload="LoadTextBox">
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
</body>