Develop Reference

how to get variable value from div

I have the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:
Working variable:
Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>
Not working variable inside div:
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" id='sdatefield'>
<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 () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
</script>
</div>
</div>

observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.
Try like the below
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
<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.js"> </script>
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" >
<input type='text' class="form-control" id="sdatefield"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
Thanks

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>

Javascript not working - datepicker

I'm trying to use a datepicker and a time picker in my html form. My code is below :
<div class="form-group" style="width: 50%;">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker" name="date" >
</div>
<!-- /.input group -->
</div>
<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>
<label>
And I use the inclusions below:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
<script type="text/javascript" src="plugins/datepicker/locales/bootstrap-datepicker.fr.js"></script>
<script type="text/javascript" src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
The html is working fine, I can see the datepicker field but I can't use it, the timepicker seems to got the same problem.
When I click on it, the calendar or the timepicker are not opening.
What is wrong?

where is your javascript to initialize fields and convert to datepickers? if you only do html markup, fields know nothing about functionality.
use this:
$('#datepicker').datepicker();
but first! read the docs...

Datetimepicker. Doesn't show any timer

I have a situation with datetimepicker. It doesn't show any timer when I click the first icon. The second works. The chrome browser not showing any errors in the development console. Any suggestions ?
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
jQuery:
$(function() {
$('.datetimepicker').datetimepicker({
pickDate: false
});
});
<script src='js/moment.min.js'></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/calendar.js'></script>
<script src="js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">

You can add these as CDNs.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
And use only datepicker:
<script>
$(function() {
$('.form-control').datepicker({
pickDate: false
});
});
</script>
In general, check you library dependencies. Here is more information about it: https://jqueryui.com/datepicker/

The problem is that you were trying to initialise the datetimepicker on the <div> instead of the <input> itself. Try changing your HTML to:
<div class="input-append form-group">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
Note the datetimepicker included on the class attribute of each input..
And in order to initialise all datetimepicker controls at once, use:
$('.datetimepicker').each(function(){
$(this).datetimepicker({
pickDate: false
});
});
EDIT
pickDate: false will disable your datetimepicker, remove this attribute and everything should work as expected.

Bootstrap-Datepicker not working properly

My bootstrap-datetimepicker is not working properly
This question has been asked a lot of times here, but the answers from here, here and here and manny others didn't help me further...
at the top of my webpage in the<head> i'm including:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
and then in my form i want to call him like this:
<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>
and at the bottom before the </body> tag there is the javascript/jquery part:
<script type="text/javascript">
$('#datetimepicker').datepicker();
</script>
What am i doing wrong ? Can someone correct my mistakes ?

i've read that bootstrap datepicker requires jquery 1.7.1 and up
check this fiddle im using jquery 1.9.1
<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>

Try wrap plugin initialization in document ready function.
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker').datepicker();
});
</script>