如何将 bootstrap datetimepicker 设为 select 唯一时间
How make bootstrap datetimepicker to select only time
将 bootstrap 日期时间选择器与初始化一起使用，例如：
$('#departure-time').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'yyyy-mm-dd hh:ii'
}).on('change', function () {
});
我没找到我怎样才能做到select唯一的时间
设置格式：
format: 'hh:ii'
没有帮助。
哪种方式是正确的？
我有：
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",
已修改：
在我的项目中 "jquery": 使用了 "^3.3.1" 并且我不能移动到 "jquery 2,
会不会是
的原因
“Uncaught Error: Invalid date format. at Object.parseFormat” error
初始化时在控制台中
日期时间选择器为：
$('#time_utc').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'LT',
}).on('change', function () {
});
我可以修复错误吗？
修改#2:
我尝试将 bootstrap-datetimepicker 提升到版本 4.17.47，这似乎是最新的
https://github.com/Eonasdan/bootstrap-datetimepicker
但是我有问题，因为
在我项目的 package.json 中，我有一行：
"bootstrap-datetimepicker": "^0.0.7",
我修改为
"bootstrap-datetimepicker": "^4.17.47",
但是运行我在 npm 安装时遇到了错误：
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@^4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
我修改为
"bootstrap-datetimepicker": "4.17.47",
但是运行在 npm install 我得到了类似的错误：
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
我从 package.json
清除了 bootstrap-datetimepicker
和运行
npm install bootstrap-datetimepicker
安装时我再次看到 package.json:
"bootstrap-datetimepicker": "0.0.7",
我从一开始就拥有的。
另外，请看一下package.json :
{
"private": true,
"scripts": {
"cleanup": "rm -rf public/assets public/css public/fonts public/images public/js public/mix-manifest.json ",
"predev": "npm run cleanup",
"dev": "npm run fix && npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run fix && npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"lint": "npx standard 'resources/js/**/*.js'",
"fix": "npx standard 'resources/js/**/*.js' --fix"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^11.2.0",
"@ckeditor/ckeditor5-build-balloon": "^12.4.0",
"@ckeditor/ckeditor5-build-balloon-block": "^12.4.0",
"@ckeditor/ckeditor5-build-classic": "^12.4.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^12.4.0",
"@ckeditor/ckeditor5-build-inline": "^12.4.0",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/google-calendar": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@uppy/core": "^1.8.2",
"@uppy/progress-bar": "^1.3.7",
"@uppy/tus": "^1.5.5",
"@yaireo/tagify": "^2.23.1",
"animate.css": "^3.5.2",
"autosize": "^4.0.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "0.0.7",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "1.13.10",
"bootstrap-switch": "3.3.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chart.js": "^2.7.3",
"clipboard": "^2.0.6",
"corejs-typeahead": "^1.3.0",
"counterup": "^1.0.2",
"datatables.net-autofill-bs4": "^2.3.4",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons-bs4": "^1.6.0",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.0",
"datatables.net-fixedheader-bs4": "^3.1.6",
"datatables.net-keytable-bs4": "^2.5.1",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
"datatables.net-rowreorder-bs4": "^1.2.6",
"datatables.net-scroller-bs4": "^2.0.1",
"datatables.net-select-bs4": "^1.3.1",
"dompurify": "^1.0.9",
"dropzone": "^5.7.0",
"dual-listbox": "1.1.0",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"flot": "^3.2.2",
"gmaps": "^0.4.25",
"handlebars": "^4.7.3",
"inputmask": "^4.0.6",
"ion-rangeslider": "^2.2.0",
"jkanban": "^1.2.1",
"jquery": "^3.3.1",
"jquery-form": "^4.2.2",
"jquery-ui": "^1.12.1",
"jquery-validation": "1.19.0",
"jquery.repeater": "^1.2.1",
"jqvmap": "^1.5.1",
"js-cookie": "^2.2.0",
"jstree": "^3.3.9",
"jszip": "^3.2.2",
"leaflet": "^1.6.0",
"markdown": "^0.5.0",
"morris.js": "^0.5.0",
"nouislider": "^13.1.0",
"owl.carousel": "^2.3.4",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pdfmake": "^0.1.65",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"prismjs": "^1.8.4",
"quill": "^1.3.6",
"raphael": "^2.2.7",
"select2": "^4.0.13",
"socicon": "^3.0.5",
"sticky-js": "^1.2.0",
"stream-exhaust": "^1.0.2",
"summernote": "^0.8.16",
"sweetalert2": "^8.0.6",
"tagify": "^0.1.1",
"tether": "^1.4.3",
"tinymce": "^5.2.0",
"toastr": "^2.1.4",
"tooltip.js": "^1.2.0",
"underscore": "^1.8.3",
"uppy": "^1.10.1",
"waypoints": "^4.0.1",
"whatwg-fetch": "^3.0.0",
"wnumb": "^1.1.0"
},
"devDependencies": {
"@turf/turf": "^5.1.6",
"axios": "^0.19.2",
"cross-env": "^5.1",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"standard": "^14.3.3",
"vue-template-compiler": "^2.6.11"
},
"standard": {
"globals": [
"$",
"jQuery",
"_",
"moment",
"turf",
"swal",
"toastr",
"axios",
"L",
"FormData",
"KTUtil",
"KTApp"
]
}
}
它有很多包。这个项目不是我的，我只是加入了团队。
错误的原因可能是这个文件中的错误吗？
谢谢！
使用format: 'LT'，勾选documentation:
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function () {
});
更新
工作示例 (jQuery 2.x, Bootstrap 3):
$(function() {
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.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='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
我使用 jQuery 版本 2.x 因为这个 bug.
更新 2
这是另一个使用
的工作示例
jQuery 3.3.1
Bootstrap 4.4.1
Bootstrap-datetimepicker 4.17.47
Bootstrap 4 中删除的 Glyphicons，所以我从 Bootstrap 3.
中包含了它们
您使用的bootstrap-datetimepicker太老了，您应该更新到较新的版本。
对特定版本使用 npm update 或 npm update bootstrap-datetimepicker 或 bootstrap-datetimepicker@4.17.47，或者您可以在 package.json 文件中更改它。
如果版本没有变化，你可以尝试删除文件package-lock.json（保存一份副本）并在你的package.json和运行[=22]中修改版本=].
$(function() {
$('#departure-time').datetimepicker({
format: 'LT'
}).on('change', function() {});
});
<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.15.1/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
将 bootstrap 日期时间选择器与初始化一起使用，例如：
$('#departure-time').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'yyyy-mm-dd hh:ii'
}).on('change', function () {
});
我没找到我怎样才能做到select唯一的时间 设置格式：
format: 'hh:ii'
没有帮助。
哪种方式是正确的？
我有：
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "^0.0.7",
已修改： 在我的项目中 "jquery": 使用了 "^3.3.1" 并且我不能移动到 "jquery 2, 会不会是
的原因“Uncaught Error: Invalid date format. at Object.parseFormat” error
初始化时在控制台中 日期时间选择器为：
$('#time_utc').datetimepicker({
todayHighlight: true,
autoclose: true,
format: 'LT',
}).on('change', function () {
});
我可以修复错误吗？
修改#2: 我尝试将 bootstrap-datetimepicker 提升到版本 4.17.47，这似乎是最新的 https://github.com/Eonasdan/bootstrap-datetimepicker
但是我有问题，因为 在我项目的 package.json 中，我有一行：
"bootstrap-datetimepicker": "^0.0.7",
我修改为
"bootstrap-datetimepicker": "^4.17.47",
但是运行我在 npm 安装时遇到了错误：
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@^4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
我修改为
"bootstrap-datetimepicker": "4.17.47",
但是运行在 npm install 我得到了类似的错误：
npm ERR! code ETARGET
npm ERR! notarget No matching version found for bootstrap-datetimepicker@4.17.47.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
我从 package.json
清除了 bootstrap-datetimepicker和运行
npm install bootstrap-datetimepicker
安装时我再次看到 package.json:
"bootstrap-datetimepicker": "0.0.7",
我从一开始就拥有的。
另外，请看一下package.json :
{
"private": true,
"scripts": {
"cleanup": "rm -rf public/assets public/css public/fonts public/images public/js public/mix-manifest.json ",
"predev": "npm run cleanup",
"dev": "npm run fix && npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run fix && npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"lint": "npx standard 'resources/js/**/*.js'",
"fix": "npx standard 'resources/js/**/*.js' --fix"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^11.2.0",
"@ckeditor/ckeditor5-build-balloon": "^12.4.0",
"@ckeditor/ckeditor5-build-balloon-block": "^12.4.0",
"@ckeditor/ckeditor5-build-classic": "^12.4.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^12.4.0",
"@ckeditor/ckeditor5-build-inline": "^12.4.0",
"@fortawesome/fontawesome-free": "^5.13.0",
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/google-calendar": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@uppy/core": "^1.8.2",
"@uppy/progress-bar": "^1.3.7",
"@uppy/tus": "^1.5.5",
"@yaireo/tagify": "^2.23.1",
"animate.css": "^3.5.2",
"autosize": "^4.0.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.4.1",
"bootstrap-datepicker": "^1.8.0",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-datetime-picker": "^2.4.4",
"bootstrap-datetimepicker": "0.0.7",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "1.13.10",
"bootstrap-switch": "3.3.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chart.js": "^2.7.3",
"clipboard": "^2.0.6",
"corejs-typeahead": "^1.3.0",
"counterup": "^1.0.2",
"datatables.net-autofill-bs4": "^2.3.4",
"datatables.net-bs4": "^1.10.20",
"datatables.net-buttons-bs4": "^1.6.0",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.0",
"datatables.net-fixedheader-bs4": "^3.1.6",
"datatables.net-keytable-bs4": "^2.5.1",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
"datatables.net-rowreorder-bs4": "^1.2.6",
"datatables.net-scroller-bs4": "^2.0.1",
"datatables.net-select-bs4": "^1.3.1",
"dompurify": "^1.0.9",
"dropzone": "^5.7.0",
"dual-listbox": "1.1.0",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"flot": "^3.2.2",
"gmaps": "^0.4.25",
"handlebars": "^4.7.3",
"inputmask": "^4.0.6",
"ion-rangeslider": "^2.2.0",
"jkanban": "^1.2.1",
"jquery": "^3.3.1",
"jquery-form": "^4.2.2",
"jquery-ui": "^1.12.1",
"jquery-validation": "1.19.0",
"jquery.repeater": "^1.2.1",
"jqvmap": "^1.5.1",
"js-cookie": "^2.2.0",
"jstree": "^3.3.9",
"jszip": "^3.2.2",
"leaflet": "^1.6.0",
"markdown": "^0.5.0",
"morris.js": "^0.5.0",
"nouislider": "^13.1.0",
"owl.carousel": "^2.3.4",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pdfmake": "^0.1.65",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"prismjs": "^1.8.4",
"quill": "^1.3.6",
"raphael": "^2.2.7",
"select2": "^4.0.13",
"socicon": "^3.0.5",
"sticky-js": "^1.2.0",
"stream-exhaust": "^1.0.2",
"summernote": "^0.8.16",
"sweetalert2": "^8.0.6",
"tagify": "^0.1.1",
"tether": "^1.4.3",
"tinymce": "^5.2.0",
"toastr": "^2.1.4",
"tooltip.js": "^1.2.0",
"underscore": "^1.8.3",
"uppy": "^1.10.1",
"waypoints": "^4.0.1",
"whatwg-fetch": "^3.0.0",
"wnumb": "^1.1.0"
},
"devDependencies": {
"@turf/turf": "^5.1.6",
"axios": "^0.19.2",
"cross-env": "^5.1",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"standard": "^14.3.3",
"vue-template-compiler": "^2.6.11"
},
"standard": {
"globals": [
"$",
"jQuery",
"_",
"moment",
"turf",
"swal",
"toastr",
"axios",
"L",
"FormData",
"KTUtil",
"KTApp"
]
}
}
它有很多包。这个项目不是我的，我只是加入了团队。 错误的原因可能是这个文件中的错误吗？
谢谢！
使用format: 'LT'，勾选documentation:
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function () {
});
更新
工作示例 (jQuery 2.x, Bootstrap 3):
$(function() {
$('#departure-time').datetimepicker({
// todayHighlight: true,
// autoclose: true,
format: 'LT'
}).on('change', function() {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.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='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
我使用 jQuery 版本 2.x 因为这个 bug.
更新 2
这是另一个使用
的工作示例jQuery 3.3.1
Bootstrap 4.4.1
Bootstrap-datetimepicker 4.17.47
Bootstrap 4 中删除的 Glyphicons，所以我从 Bootstrap 3.
中包含了它们您使用的bootstrap-datetimepicker太老了，您应该更新到较新的版本。
对特定版本使用 npm update 或 npm update bootstrap-datetimepicker 或 bootstrap-datetimepicker@4.17.47，或者您可以在 package.json 文件中更改它。
如果版本没有变化，你可以尝试删除文件package-lock.json（保存一份副本）并在你的package.json和运行[=22]中修改版本=].
$(function() {
$('#departure-time').datetimepicker({
format: 'LT'
}).on('change', function() {});
});
<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.15.1/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='departure-time'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>