I have used datepicker from jQuery in my page and it is working fine:
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/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.0/jquery-ui.js"></script>
<script>
$( function(){
$("#startdate").datepicker({dateFormat: 'yy-mm-dd'});
} );
$( function(){
$("#enddate").datepicker({dateFormat: 'yy-mm-dd'});
} );
</script>
</head>
<body>
<form action="" method="post">
From Date-Time:<br>
<input type="text" id="startdate" name="startdate" value="">
<br>
To Date-Time:<br>
<input type="text" id="enddate" name="enddate" value="">
</body>
Now I want to add Time to it. I have searched & downloaded the same in jQuery "datetimepicker"but unable to make it work.
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery.datetimepicker.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function(){
$("#startdate").datetimepicker({dateFormat: 'yy-mm-dd'});
} );
$( function(){
$("#enddate").datetimepicker({dateFormat: 'yy-mm-dd'});
} );
</script>
</head>
<body>
<form action="" method="post">
From Date-Time:<br>
<input type="text" id="startdate" name="startdate" value="">
<br>
To Date-Time:<br>
<input type="text" id="enddate" name="enddate" value="">
</body>
Can you please advise, what should be the corrective action.
Try importing jquery before importing datetime picker js
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
Problem is solved after adding "js/jquery.datetimepicker.full.js"
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.full.js"></script>
Related
I have been setting up jtsage datepicker in my demo application. Code is written as follows:
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/jtsage-datebox-bootstrap4#5.3.3/jtsage-datebox.min.js"
></script>
<script
type="text/javascript"
src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"
></script>
</head>
<body>
<div class="parent-div">
<input
class="calbox customTextfield customBorder"
data-ui-role="datebox"
data-role="datebox" data-datebox-mode="calbox"
name="demoDate"
id="demoDate"
type="text"
pattern="\d*"
data-theme="b"
autocomplete="off"
data-options='{"mode":"calbox", "overrideDateFormat":"%d/%m/%y", "lockInput": false}'
data-role="datebox" 'data-bind="disable: (!connectedViewModel.connected() || detailsViewModel.disabled())"'
tabindex="5"/>
<input
class="timebox customTextfield customBorder"
data-ui-role="datebox"
data-role="datebox"
data-options='{"mode":"timebox", "lockInput": false, "timeFormat": "24", "timeOutput":"%k:%M"}'
name="demoTime"
id="demoTime"
type="text"
data-theme="c"
autocomplete="off"
pattern="[0-9]*"
maxlength="5"
tabindex="4" />
</div>
</body>
</html>
Rendered datebox takes body tag as parent container. How do I customize this parent container??
I have tried many of the datepicker js approaches by setting parent tag in container field. Still takes body as parent element.
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>
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.
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.
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>