https://i.stack.imgur.com/vK4OB.png
Currently my display is like this.
I have a master page which I am using to import my css and js.
<link href="assets/css/datepicker.css" rel=Stylesheet />
<link href="assets/css/bootstrap-responsive.css" rel=Stylesheet />
<link href="assets/css/bootstrap.css" rel=Stylesheet />
<link href="assets/css/docs.css" rel=Stylesheet />
<link href="assets/less/bootstrap.less" type="text/css" rel="Stylesheet/less" />
In head and for the javascript:
<script src="assets/js/less-1.3.0.min.js" type="text/jscript"></script>
<script src="assets/js/jquery.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-transition.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-alert.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-modal.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-dropdown.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-scrollspy.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-tab.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-tooltip.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-popover.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-button.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-collapse.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-carousel.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-datepicker.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-typeahead.js" type="text/jscript"></script>
<script>
$('#datepicker').datepicker();
</script>
The control:
<div class="input-append date" id="datepicker" data-date="12-02-2012"
data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span> </div>
Want the days to go horizontal as they should be, not sure what i'm missing?
I think this what you need DEMO
HTML:
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
Script:
$('#dp3').datepicker();
var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);
Related
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="Js/bootstrap-datetimepicker.min.js"></script>
<script src="Js/bootstrap-datetimepicker.he.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
why this is not working:
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
datetimepicker is not a function jquery
What is the right arrangement that will work?
You can get the bootstrap datetimepicker from here.
$(function () {
$('#dtpickerdemo').datetimepicker();
});
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
/>
<link
href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="//code.jquery.com/jquery-2.1.1.min.js"
></script>
<script
type="text/javascript"
src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="form-group">
<label for="dtpickerdemo" class="col-sm-2 control-label"
>Select date/time:</label
>
<div class="col-sm-4 input-group date">
<input type="text" class="form-control" id="dtpickerdemo" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
So I'm a bit new to web programming, and I'm trying to include a jQuery widget (pop-up calender when you click on the textbox) on my website. When I open the html script in chrome locally the widget works fine, but on my website it doesn't work at all.
When I visit my website as a regular user, Chrome says "Not Secure" before the https://________ . Maybe this has something to do with it?
Sorry for the big block of code but I don't know where the mistake in my script is.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->
</body>
</html>
It is not working, because you placed JS/jquery multiple times. This version should work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<!-- END -->
</body>
</html>
There are some resources with http:// url are included in your source code, So that is why it's showing "Not Secure".
I would suggest to include all your Javascript libraries related to your functionality at the bottom of your html.
I am trying to add a datepicker to one of my form fields, but it simply won't appear. When I hover over the icon, the hand button comes up as if it is clickable, but when I click it, nothing happens. Here is my code:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
#using (Html.BeginForm("Index", "Engagement", FormMethod.Get, new { #class = "form-inline" }))
{
<div class="form-group">
<label for="end">Start date:</label><br />
<div class='input-group date' id='StartDateFilter'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#StartDateFilter').datetimepicker({
locale: 'en-GB'
});
});
</script>
}
jurfer i think ,the script order was incorrect. Here is the code which works
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='dt1'>
<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">
$('#dt1').datetimepicker({
locale: 'en-GB'
});
</script>
</div>
</div>
Hi I have the HTML page where I have input field for date picker but that date picker is not working.Below is my code.
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../CSS/Final_Pages/CSS/tableStyle.css" rel="stylesheet" />
<link href="../CSS/tableStyleResponsive.css" rel="stylesheet" />
<link href="../CSS/Custom_style.css" rel="stylesheet" />
<link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div data-role="page">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:11)">
<div role="main" class="ui-content">
<!-- Other Information Field Starts-->
<div data-role="fieldcontain">
<label id="doblbl">Date Of Birth:</label>
<input type="text" id="dob" name="dob" value="" data-role="date" />
</div>
</div>
</form>
</div>
</body>
</html>
Try take a look at this:
Not sure if its is what your looking for
<div id="indexPage" data-role="page">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src=" http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
when I clicked on time icon it shows nothing. I am using this code:
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<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>
</div>
</div>
and here is the script and CSS i m using:
<link type="text/css" href="assets/css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="assets/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
You have to put the id on your parent div :
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<div id="timepicker1" class="input-append bootstrap-timepicker">
<input type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
<!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>
It works fine.
Have you include jquery and bootstrap scripts, css too?