javascript - DatetimePicker and jquery version incompatibility -
i have working jsfiddle example:
according example trying 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 start see usual input.
what wrong?
p.s.
i noticed wrong jquery version. if change on jsfiddle - doesn't work(simple input see) , when return - doesn't work anyway.
update
now have 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 input-group
icon need set picker container div , not input
$(document).ready(function () { $('#startdatediv').datetimepicker({ format: 'lt' }); });
Comments
Post a Comment