How to set container for my jtsage datebox - javascript

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.

Related

Bootstrap datetimepicker CSS problems

I'm trying to use the bootstrap datetimepicker on a ASP.NET application. I'm getting some weird CSS problems though. Here is what it looks like:
As you can see, the icon is set far to the right, the background is blue, and there is a black box wherever the cursor is. These are the files I'm using on my webpages:
<link href="~/Content/Style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/umd/popper.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet"type="text/css" />
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Chart.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
And this is what the html/js looks like where I use datetimepicker (the code is right from their website).
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
Is there an issue with the way I'm importing these files or maybe the CSS file?
Thanks!
Some css files seem to be conflicted, You can find out which css files affect the length of input box and mouse hover effect on datetimepicker.
Bootstrap version might affect those issues.

Datetime picker script not working

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>

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.

How to use bootstrap datepicker

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>

Why is this simple jQueryUI code not working?

Here's the literal HTML markup I have:
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Register</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link rel="Stylesheet" href="../../Content/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.date-selector').datepicker();
}
</script>
<form action="/account/register" method="post"> <fieldset>
<legend>UserModel</legend>
<div class="editor-label">
<label for="DateOfBirth">Fecha de Nacimiento</label>
</div>
<div class="editor-field">
<input class="date-selector" data-val="true" data-val-required="Debe escribir su fecha de nacimiento" id="DateOfBirth" name="DateOfBirth" type="text" value="1/1/0001 12:00:00 AM" />;
<span class="field-validation-valid" data-valmsg-for="DateOfBirth" data-valmsg-replace="true"></span>
</div>
Notice that the class date-selector is properly set, and also the javascript is properly hooking the event up. (I think).
How can I debug what's going wrong? Why doesn't the datepicker control pop up when I click on the date of birth input textbox?
You're missing a closing ); at the end of your $(document).ready() handler:
$(document).ready(function() {
$('.date-selector').datepicker();
});
For future reference, a good tool for checking your JavaScript before even running it is JSLint.

Categories

Resources