I have a working jsfiddle example:
according this example I am trying to write code.
my code:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sprSec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"
rel="stylesheet">
<script src='//code.jquery.com/jquery-2.1.4.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js'></script>
<script src='//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#startDateDiv').datetimepicker({
format: 'LT'
});
});
</script>
</head>
<body>
<div class="row-fluid main-content chose" style="padding: 20px 0 67px 0;">
<form:form commandName="campaignBeanDto" id="addParams" method="POST">
<div class="param-line">
<div id="startDateDiv" class="input-append date add-params-date-div">
<fmt:formatDate pattern='dd/MM/yyyy' type='date' value='${campaign.beginDate}' var="beginDate"/>
<form:input path="beginDate" id="startDate" name="beginDate"
data-format="dd/MM/yyyy" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
</div>
</div>
</form:form>
</div>
</body>
</html>
But when I start it I see just usual input.
What do I wrong?
P.S.
I noticed that something wrong with jquery version. If I change it on jsfiddle - it doesn't work(simple input I see) and when return it back - it doesn't work anyway.
update
Now I have the following code:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sprSec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"
rel="stylesheet">
<script src='//code.jquery.com/jquery-2.0.2.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/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#startDate').datetimepicker({
format: 'LT'
});
});
</script>
</head>
<body>
<div class="row-fluid main-content chose" style="padding: 20px 0 67px 0;">
<form:form commandName="campaignBeanDto" id="addParams" method="POST">
<div class="param-line">
<div id="startDateDiv" class="input-append date add-params-date-div">
<fmt:formatDate pattern='dd/MM/yyyy' type='date' value='${campaign.beginDate}' var="beginDate"/>
<form:input path="beginDate" id="startDate" name="beginDate"
data-format="dd/MM/yyyy" type="text" />
<span class="input-group-addon">
<span class=""></span>
</span>
</div>
</div>
</div>
</div>
</form:form>
</div>
</body>
</html>
It doesn't work too.
if you're using the
input-groupwith the icon you need to set the picker to the container div and not the input