I have a Bootstrap datetimepicker component in my code that was working a few weeks ago but has stopped working. I appreciate any help getting to start working again.
Find below my HTML code:
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis#latest/dist/moralis.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>
<form action="" method="post" class="datepickers">
<div class="form-group">
<div class="input-group date" id="id_0">
<input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".datepickers").click(function(){
$("#id_0").datetimepicker();
alert("MammazZ!");
});
});
</script>
</div>
</div>
When I click within the datepickers input field as illustrated below:
The MammazZ alert is fired, followed by
a slight change (the seconds are omitted) as illustrated below:
Please help me resolve this!
I think the problem is due to an incompatibility in imports and the sequence of imports. In case you want to use bootstrap 5, things get more easy
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<input id="date" class="form-control" type="date"/>
</div>
</form>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Related
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.
i am using jquery datetime picker
my problem is when i select the time and use tab button it will change to minus 1 hours
means if i select 9.30 am and click on tab button it will be 8.30 am and it will countinuely do minus when ever i use tab on that controll
here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM
here is a code
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/scripts/jquery.min.js"></script>
<script src="~/scripts/moment.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/scripts/jquery.datetimepicker.full.min.js"></script>
<script src="~/scripts/VagaroDateTimePicker.js"></script>
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" class="datepicker" />
</div>
</div>
</div>
$('.datepicker').datetimepicker({
format: 'M-d-Y g:i A',
});
i got the solution for this
$('.datepicker').datetimepicker({
// datepicker: false,//hide date
// format: 'DD-M-YYYY hh:mm A'
format: 'M-d-Y g:i A',
formatTime: 'g:i A',
validateOnBlur: false,
});
i have added validateOnBlur:false and its work for me
I test your code and i saw the problem that when you press tab if you choose 10.00 AM its became 09.00 AM and i checked the documentation and i figure out that you can combine moment.js as its written in the documentation
All you have to do to just add moment.js and then add this line to your codes
$('.datepicker').datetimepicker({
format:'DD.MM.YYYY h:mm a',
formatTime:'h:mm a',
formatDate:'DD.MM.YYYY'
});
$.datetimepicker.setDateFormatter('moment');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mb-5">
<input type="text" class="datepicker"/>
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
</div>
</div>
and i already made for you here please check it out and tell me if its helps
Fiddle: https://jsfiddle.net/v82vkxpz/7/
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/
Sorry if its repeated but i cannot found solution. So ask on stackoverflow.
You can check my problem in image and also see that all required files are included. Just check it and help to fix it.
Thanks in advance.
Below is my code:
<div class="form-group">
<label class="control-label col-sm-3" >Set Date : </label>
<div class="col-sm-8">
<input type="text" id="datetimepicker" class="form-control datetimepicker" name="date_add_custom" placeholder="Set Date" value="" autocomplete="off"/>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script type="text/javascript">
$('.datetimepicker').datetimepicker({
// format:'YYYY-MM-DD HH:mm',
format:'MM/DD/YYYY HH:mm', //HH = 24 hours
pickTime: true,
});
</script>
i am trying to get the Bootstrap Datepicker to work on my website but the button seems to be disabled and doesn't do anything when i click on it or the input form box here is my test code I am not sure what i am doing wrong here. i am using bootstrap 3.3.5
<!DOCTYPE html><html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="form-group">
<div class="input-group date" id='datepicker'>
<input type="text" class="form-control" placeholder="Birthdate yyyy/mm/dd">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</form>
</center>
</body>
</html>
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<legend>Bootstrap-datepicker set date sample</legend>
<div class="form-group">
<label for="exampleInputDate">Some special date</label>
<input type="text" class="form-control" id="exampleInputDate">
</div>
</fieldset>
</div>
</div>
</div>
here is the javascript file
var firstDayOfMonth = function() {
// your special logic...
return 5;
};
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear,currMonth,firstDayOfMonth());
$('#exampleInputDate').datepicker('setDate',startDate);
This should work perfectly
here is the plunker