I'm using SB Admin template for my application. I want to add bootstrap date picker to my input. But somehow I'm missing the order of JS & CSS libraries loading order which I think is not working in my case as going through multiple articles.
Below is code in <html> section
$('#datetimepicker').datepicker();
<head>
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>
Thanks in Advance.
it's a conflict with moment.js as i know.look if moment have his own datepicker library.
Related
I need your help. I want to build a form on website x which send data to a Sharepoint to domain y. I have the Office 365 Enterprise - Business Essentials License
Is that even possible?
What an where do I have to setup Office365 (API etc.)
Hot to connect via SharePoint REST API?
Can you guys give me an example for my HTML code. I have the same forms also in Sharepoint:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input readonly class="form-control" id="name" name="name" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="date">
Date
</label>
<input readonly class="form-control" id="date" name="date" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="time">
Time
</label>
<input readonly class="form-control" id="time" name="time" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="location">
Location
</label>
<input readonly class="form-control" id="location" name="location" value="" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Apart from CORS issue that Jeff mentioned in the comment, you need an App Registration in your SP Online environment:
https://yourtenantname.sharepoint.com/_layouts/15/appregnew.aspx
and then assigning App permisssions at:
https://yourtenantname.sharepoint.com/_layouts/15/appinv.aspx
Permissions XML:
<AppPermissionRequests AllowAppOnlyPolicy="true">
<AppPermissionRequest Scope="http://sharepoint/content/sitecollection/web"
Right="FullControl"/>
</AppPermissionRequests>
and then trusting the app.
These steps will provide you with an client id and secret that you need to use to implement OAuth 2.0 (authorization code grant flow or implicit grant flow depending upon your web app), which will get you the access token that you can use to authenticate SharePoint Rest API calls through authorization header.
I have a bootstrap datepicker in a div. Everything works fine until i reduce the window's dimensions.
The code is the following:
<div class="col-md-3">
<p> Pick a Date: </p>
<div class="datepicker input-group" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-3">
<p>Choose a Campaign:</p>
<select id="selectCampaign" class="form-control">
<option value="opt1" id="opt1">opt1</option>
<option value="opt2" id="opt2">opt2</option>
</select>
</div>
<div class="col-md-3">
<a class="btnSearch" href="#">Search</a>
</div>
$(document).ready(function () {
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
});
Here's the "error":
Here's the normal app behaviour:
Make sure that you're using the latest version of bootstrap. Otherwise, it should run as intended. Refer to my answer below. Hope this is what you're looking for.
Edit I think, the main mistake you're making is not providing an id for the datepicker.Only when the id is provided and called, the datepicker is going to become responsive. Check out the code snippet that I've modified.
Define an id for the datepicker as here below.
<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
Datepicker code snippet
$(document).ready(function() {
$(function() {
$('#datetimepicker1').datetimepicker({format: 'DD/MM/YYYY'});
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-3">
<p> Pick a Date: </p>
<div class="datepicker input-group" id='datetimepicker1' data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
<div class="col-md-3">
<p>Choose a Campaign:</p>
<select id="selectCampaign" class="form-control">
<option value="opt1" id="opt1">opt1</option>
<option value="opt2" id="opt2">opt2</option>
</select>
</div>
<div class="col-md-3">
<a class="btnSearch" href="#">Search</a>
</div>
Hope it works now
When I click on the text box or icon, I can't get the popup calendar to appear. I get no JavaScript errors and just can't seem to work out what the issue is.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#datetimepicker input').click(function(event) {
$('#datetimepicker').data("DateTimePicker").show();
});
</script>
<!-- in the body -->
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
Can anyone see what I'm doing wrong as I'm really confused now and can't seem to work it out.
Thanks
In document.ready you have to initialize the datepicker just use this
$("#datetimepicker ").datepicker({
dateFormat: 'd-M-yy'
});
and it will automatically show calendar when you click on input type
Ensure that you've correctly imported jQuery, jQuery DateTimePicker JS & CSS. Then use datetimepicker simply as following, no need of a click event -
$('#datetimepicker').datetimepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
It is possible to manage an input with type time to display only hours, not minutes.
<div class="form-group">
<label for="heure_seance" class="col-md-4 control-label">Heure : </label>
<div class="col-md-6">
<input id="heure_seance" type="time" step='60' class="form-control" name="heure_seance" required>
</div>
</div>
I need to use Javascript or it is possible with an HTML attribute?
I need to do this because on my database, time stored are entire hours, we don't store minutes.
Thank's for help!
You can either disable the input or set it as read-only to avoid unexpected entered text from the user.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH'
});
});
</script>
</div>
</div>
I have an HTML form which preloads with data from MySQL. I have added one form field "New Follow Up" to have a popup calendar using datepicker. The datepicker returns a DATE format, which I need to convert to DATETIME for MySQL. The return is currently date_followup.
I was wondering if this could be done within the <script> function, so that the date_followup could be in the standard DATETIME format, elimination the conversion. Or is there an easier way?
<div class="control-group <?php echo !empty($date_followupError)?'error':'';?>">
<label class="control-label">New Followup Date</label>
<div class="controls">
<input name="date_followup" type="text" placeholder="Enter Follow up date" value="<?php echo !empty($date_followup)?$date_followup:'';?>">
<?php if (!empty($date_followupError)): ?>
<span class="help-inline"><?php echo $date_followupError;?></span>
<?php endif;?>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input id="datepicker" input name="date_followup">
</body>
</div>
</div>
First i recommend you to split your codes. Create your own JavaScript file e.g. main.js, program all your JavaScript function in and refer the main.js file in your HTML-header. It would be much easier to debug your code. Furthermore you need a JavaScrip-Lib for a Datetimepicker. As my previous speaker said, use the eonasdan-picker and refer it also in your header file. So:
HTML
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="path/to/main.js"></script>
</head>
<body>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
JavaScript (main.js)
$( document ).ready(function() {
$('#datepicker').datetimepicker({
//here you have the possibilty to configure the picker as you wish
//e.g. the format
format: 'y-m-d'
//read the documentary of EONASDAN to see which attributes you can choose
})
});
Important: The order of your CSS- and JS-Libs matters. E.g. the datetimepicker of EONASDAN needs the jQuery-Lib. If the jQuery-lib is reffered after eonasdan, it would not work. Same with the main.js, which should reffered evertime as the last file.
**include bootstrap files**
<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>
https://eonasdan.github.io/bootstrap-datetimepicker/