Calender in inputbox - javascript

I want to show datepicker in input box.4 days before This code show datepicker.Now I modified unknownly.I dont know What I changed.Here I attached my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<title>Content Delv Logs</title>
<script type="text/javascript">
$(window).ready(function() {
$('#date-pick').datePicker({clickInput: true});
});
</script>
</head>
<body>
<input type="text" name="date" id="date-pick" value=""/>
</body>

Add this link in your head tag. You are missing jQuery UI library:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

$(function() {
$( "#datepicker" ).datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
use jquery UI with alot of functions and more to give;;;
http://jqueryui.com/
http://jqueryui.com/datepicker/

You just need to enable jQuery UI.
Have a look at this JSFiddle
$(function() {
$( "#datepicker" ).datepicker();
});
Please note how jQueryUI is enabled.

Related

Converting English Datepicker to Persian Datepicker

I have this script which uses Datepicker from jqueryui and want to change it to Persian Datepicker
<html lang="en">
<head>
<link rel="stylesheet" href="css/persian.datepicker.css"/>
<script src="js/jquery.js"></script>
<script src="js/persian.date.js"></script>
<script src="js/persian.datepicker.js"></script>
<script src="js/pwt-date.js"></script>
<script src="js/pwt-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").pDatepicker();
});
</script>
</head>
<body>
<input type="text" class="example1" />
</body>
</html>
The above code works fine alone in a html file, but when i try to implement it into the script i'm modifing, then it does not work. Here is the code from the scripts i want to change:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="form-group">
<label class="col-md-3 control-label">News Date :-</label>
<div class="col-md-6">
<input type="text" name="news_date" id="datepicker" value="" class="form-control">
</div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Both of the codes above work for them self! I'm going insane here. I can't find a solution for why i can't simply remove the old code and replace it with new.
UPDATE: I added the script... and link to the footer.php and now i have the calender to choose. But when i chose today's date and save, then i want to edit the saved news i get the result on the right hand side!
1 is the calender form add news page, 2 is the calender from edit new page

display calendar (date picker) in html page

Can someone help me with this code. Is there any problem? Because I'm not able to display the calendar when I'm running it.
<!DOCTYPE html>
<html>
<head>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Holder"></div>
<div id="Datepicker1"></div>
</div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3
});
});
</body>
</html>
As mentioned in the comments, you haven't included jQuery or jQuery UI, and your HTML closing tags are incorrect. If you view the source of the demo on the jqueryui site, you will find the code is a little different you yours.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
To implement this into your code, it would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="CSS/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder"></div>
<div id="datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#datepicker1").datepicker({
numberOfMonths:3
});
});
</script>
</body>
</html>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You have to include jQuery and jQuery UI (I changed a few things in your markup as well):
<!DOCTYPE html>
<html>
<head>
<!-- <link> doesn't need a closing tag -->
<link href="CSS/Master.css" rel="stylesheet" type="text/css">
<!-- include the jQuery UI style sheet -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- include jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="Datepicker1"></div>
<script type="text/javascript">
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths: 3
});
});
</script>
</body>
</html>

How to add Timepicker in a Datepicker in jsp page using javascript

I have a date picker in my JSP page. Now I want to add start time and end time with in this datepicker i.e calender. How to do that. I also want to set validation that start time should always be less than the end time. My code for datepicker in JSP is
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
</head>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>
EDIT
Now my datepicker i.e. calender is also not working when I tried with this code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
<script type="text/javascript">
$('#timepicker2').timepicker({
minuteStep: 1,
template: 'modal',
appendWidgetTo: 'body',
showSeconds: true,
showMeridian: false,
defaultTime: false
});
</script>
</head>
<body>
<br>
<br>
<form>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<div class="input-append bootstrap-timepicker">
<input id="timepicker2" type="text" class="input-small">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>
<input type="submit" value="Submit">
<br>
</form>
</body>
</html>
Can anyone please help me with this.
try by changing the type in input tag from
type="text"
to
type="datetime-local"
and start modifying accordingly
Change to a datetimepicker. There are several around.
I use this one.
You can use this Jquery Plugin which will add timepicker functionality to your input elements.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
Works for me.
Hope this helps.

Datepicker Example at jqueryui.com doesn't work

Try this:
Navigate to: http://jqueryui.com/datepicker/
Cut/Paste the code in "view source" to your own new HTML page and see if it actually works.
Tried this in Chrome and Firefox.
One thing I noticed is that they don't wrap the function in '$(document).ready(function ()'
<!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>
Try to replace
<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>
by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
As saied Jason Aller in the comment :
The reason they are using // at the beginning rather than http:// is
so that it will be protocol agnostic and work with https connections.
It avoids mixed content security warnings, but breaks when the
protocol is file:// – Jason Aller
So just add http: before //code.jquery.com
Here is my solution:
$(document).ready(function () {
var userLang = navigator.language || navigator.userLanguage;
var options = $.extend({},
$.datepicker.regional["ja"], {
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
highlightWeek: true
}
);
$("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>
</body>
</html>

DatePicker using CrossRider is not working?

Using CrossRider, I want to add a DatePicker to page's DOM, here's my code:
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'), function(){$( "#datepicker" ).datepicker();});
});
But it didn't work, I also tried
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'));
$( "#datepicker" ).datepicker();
});
And it didn't work too, and I tried
appAPI.ready(function($) {
appAPI.dom.addRemoteCSS('http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css');
appAPI.dom.addRemoteJS('http://code.jquery.com/ui/1.9.2/jquery-ui.js');
$('<input type="text" id="datepicker" />').prependTo($('body'));
$('<script>$(function(){$("#datepicker").datepicker();});</script>').appendTo('head');
});
But none of them worked, meanwhile if we test this on simple page it will work ?!
For example:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/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>
How to make the datepicker works using CrossRider ?
The easiest way to include jQueryUI is to use Crossrider's native support for jQueryUI via the appAPI.resources.jQueryUI method.
For those who are interested, here's the solution:
appAPI.ready(function($) {
appAPI.resources.includeRemoteJS("http://code.jquery.com/ui/1.9.2/jquery-ui.js") ;
appAPI.dom.addRemoteCSS("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css");
$('<input type="text" id="dateFrom" />').prependTo($('body'));
$( "#dateFrom" ).datepicker();
});

Categories

Resources