Bootstrap Datetime picker not accepting options - javascript

On a page that I am working on there is a datetime picker. It is seemingly working fine, however none of the options seem to be registering and for the life of me I cannot figure out why.
I have commented out all javascript, html and external libraries that may be interfering with it. I have made sure all the files are correct. I have made sure it's being called...anything and everything I can think of.
Some help would be greatly appreciated.
<div class="form-group row " >
<label class="col-md-2 form-control-label" for="StartDate">Start Date</label>
<div class="controls " >
<div class="input-group date col-md-3 datePicker">
<input type="text" class="form-control required" id="StartDate" name="datePicker">
<span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span>
</div>
</div>
</div>
$('.datePicker').datetimepicker({
format: 'DD/MM/YYYY',//This is not working
minDate:d.setDate(d.getDate() + 1) //neither is this
})
.find("input")
.end();

This example definitely except format you can test by uncommenting format lines one by one. I hope this is usable to your request.
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<body>
<div class="container">
<div class="input-append date">
<input id="datetimepicker1" data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
//format: 'DD/MM/YYYY hh:mm:ss'
format: 'DD/MM/YYYY'
//format: 'hh:mm:ss'
});
});
</script>

Related

Bootstrap datetime picker plugin?

Here is a simple DatePicker that works.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: '"dd/MM/yyyy - hh:ii"',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datetimepicker(options);
})
</script>
<head>
<body>
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
</body>
How should the above code change in order to make it use a DATETIME picker? Im assuming I need to use different plugins within the header? Please could someone advise?
$(function() {
$('#datetimepicker1').datetimepicker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<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>
</div>
</div>
Source: https://eonasdan.github.io/bootstrap-datetimepicker/
Make working in SO with help from :https://stackoverflow.com/a/40036266/4091337
and #Abhishek in comments

datepicker is not a function in bootstrap 4.1

I am working on a domain in which I want to make the calendar visible on click of a search input box.
The HTML code which I have used in order to place a input boxes are:
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
The script files which I have used is:
<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>
Problem Statement:
I am wondering what changes I need to make in the order of script files from my domain in order to make that work.
I have a feeling the script files are placed in a wrong order in my domain.
The bootstrap-datepicker is not a part of the Bootstrap. So,you have to include datepicker plugin code, before use it.
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker").datepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<div class="dates">
<div class="start_date input-group mb-4">
<input class="form-control start_date" type="text" placeholder="start date" id="startdate_datepicker">
<div class="input-group-append">
<span class="fa fa-calendar input-group-text start_date_calendar" aria-hidden="true "></span>
</div>
</div>
<div class="end_date input-group mb-4">
<input class="form-control end_date" type="text" placeholder="end date" id="enddate_datepicker">
<div class="input-group-append">
<span class="fa fa-calendar input-group-text end_date_calendar" aria-hidden="true "></span>
</div>
</div>
</div>
If it's not possible to use CDN, you could place the CSS and JavaScript files of the plugin on your server and link to them.
I think you forgot to add jquery and bootstrap-datepicker to your domain
put this codes between <head></head>
Jquery:
Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
or
Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Also add this:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
I've got the same issue.
First it was a mismatch beetween datepicker and datetimepicker.
Next I've got a new issue with the datetimepicker and found finally that for bootstrap 4.1 there is a sucessor to bootstrap-datepicker : Tempus Dominus.
The URL web site : https://tempusdominus.github.io/bootstrap-4/
From the "Installing" section :
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>
Next from the "Usage" section :
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>

Seconds is not showing in bootstrap datetimepicker

I've read some opened issue about this, but it didn't help me. I have also read the moment.js documentation but I don't know why it still not working. I just want to add the seconds to show when picking a datetime. Please see my code below:
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Try passing useSeconds: true as shown below. That should help.
The datetimepicker FAQ says that it uses the format option to decide what components to show. But then I found useMinutes and useSeconds options here: http://eonasdan.github.io/bootstrap-datetimepicker/Changelog/#2120.
(I know its not a very good place to document a feature, but .... let it be ;) )
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A",
useSeconds: true
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Please try this snippet,
Setting the format to the correct value from moment and sideBySide:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A',
sideBySide: true,
tooltips: {
pickSecond: 'Pick Second'
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.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.17.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/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='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
For more info please visit this - How to add seconds to Bootstrap date time picker
Bootstrap3 DateTime picker - https://eonasdan.github.io/bootstrap-datetimepicker/Options/#viewdate
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<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({format: "DD/MM/YYYY hh:mm:ss A"});
});
</script>
</div>
</div>

Why is my Bootstrap date-picker not working?

I tried to use Bootstrap date-picker (https://github.com/eternicode/bootstrap-datepicker), but i can't get it to work.
On jsfiddle everything works like a charm: http://jsfiddle.net/hwuktpt2/
After some failed tests on the actual page, I even tried a blank new page and integrated everything from scratch again. jQuery works, Bootstrap styling works, Datatables works, but I just can't get date-picker to work.
Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript">
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
</script>
<style type="text/css">
.control-label {
padding-top:7px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
Neues Mobile Device anlegen
</div>
</div>
<div class="container">
<form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post">
<div class="form-group">
<label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label>
<div class="col-xs-10">
<select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED>
<option value="">-- Bitte auswählen --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label>
<div class="col-xs-10">
<input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label>
<div class="col-xs-10 date_picker">
<input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld">
</div>
</div>
</form>
</div>
</body>
Wrap the date picker initialize call in a document.ready. This code is running before the dom is finished loading from the look of it. Since JavaScript is interpreted it is run at the time it is read by the browser. Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document.ready functionality you could also move the script to the end of the body tag.
$(function(){
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<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/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
Use these Libraries after using this use below code in you body where you want to make Date field.
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
var j = jQuery.noConflict();
j(function () {
j('#datetimepicker1').datetimepicker({
format: 'L',
disabledHours: true,
});
});
</script>

Bootstrap datetime picker positioning

I added datetime picker plugin in my code. It works but not positioning rightly. When I focused on the input it's showed in footer of page not near the input. What should I check for?
$(".form-date").datetimepicker({
format: "dd.mm.yyyy",
minView: 2,
maxView: 4,
autoclose: true,
language: 'tr',
pickerPosition: "bottom-left"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class="col-md-9 input-append date form-date">
<input type="text" class="form-control" name="Tarih" id="Tarih" value="" placeholder="Tarih">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
Aside from missing some of the required assets (datetimepicker, moment, etc) in your shared snippet, you are using deprecated options which prevent datepicker from displaying.
You can find current options here.
List of required assets here.
Update to the following:
format: 'dd.MM.YYYY'
min & maxView are gone but you can check viewMode on the options link (no min-max option though).
autoclose to keepOpen (although it's set to false by default, so no
need)
language to locale: 'tr'
pickerPosition to widgetPositioning {horizontal: 'left', vertical: 'bottom'} object.
Working Snippet:
$('.form-date').datetimepicker({
format: 'dd.MM.YYYY',
locale: 'tr',
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
}
});
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class='input-group date form-date col-md-9 input-append'>
<input type='text' class="form-control" placeholder="Tarih" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
I think there is no 'pickerPosition: "bottom-left"' option for Bootstrap Datetime Picker.
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
May be it is causing the problems.
There is no datetimepicker component files in your html reference codes. You should have added js and css files.
First download the scripts from the component website here or clone from git:
$ git clone git://github.com/smalot/bootstrap-datetimepicker.git
And add references in the head section:
Sources:
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
HTML:
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
There is no option for older version of Bootstrap Datetime Picker. But you can change the positioning by applying CSS to the dropdown picker.
.bootstrap-datetimepicker-widget.dropdown-menu {
inset: auto!important;
}
Here is the docs for more details :
https://bootstrap-datepicker.readthedocs.io/

Categories

Resources