I want to use datepicker in Bootstrap 4.3.1 cdn but I'm not able to get it.
Below you can see my code.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="datepickerfrom" name="datepickerfrom" width="250" required />
<script>
$('#datepickerfrom').datepicker({
uiLibrary: 'bootstrap4'
});
</script>
The bootstrap-datepicker is not a part of the Bootstrap. So maybe you have to include datepicker plugin code before use it.
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
Reference : datepicker is not a function in bootstrap 4.1
CDN links : https://cdnjs.com/libraries/bootstrap-datepicker
Use daterange-picker much easier to setup
https://www.daterangepicker.com/#examples
<input type="text" class="form-control" name="birthday"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script>
$(function() {
$('input[name="birthday"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 666,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
});
</script>
Bootstrap 4 has made it simple. You can just change your input type to date
<input id="datepickerfrom" name="datepickerfrom" width="250" type="date" required />
ref: https://www.w3schools.com/tags/att_input_type_date.asp
Related
I'm trying to set up a simple index page with two tabs (to start), each with just a placeholder text input element, but while the toolbar displays properly the two tabs don't show at all (not just the content of the tabs, the tabs themselves don't display). I've used md-tabs before in other projects so I suspect I have something set up wrong but I'm not sure what. In developer mode, I can see the reference for the tabs, but when I select them they never get called out on the page. the around the does get called out, but none of the individual tabs do. The 'ng-init' call in the controller 'mainController' does get called, so the content of the tabs got processed, but the tabs never display. Any help would be appreciated, this is my first time trying to set this up on my own.
Here is the HTML for the index page:
<body style='padding-left: 0px' ng-app="tinkerApp">
<md-toolbar layout="row" style="background-color: rgb(255, 255, 222);">
<h1><b>ENGINE TEST</b></h1>
</md-toolbar>
<md-content>
<md-tabs md-dynamic-height md-border-bottom style='padding-left: 10px' md-stretch-tabs="always">
<md-tab label="HOME" id="home">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command"
name="command" ng-model="page.command"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
<md-tab label="ENGINE" id="engine">
<md-content>
<div ng-controller="mainController" ng-init="initPage()">
<input type="text" class="form-control-sm" id="command2"
name="command2" ng-model="page.command2"
style='width: 300px; height: 25px' />
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
Here are the calls from inside mainApp.js:
(function(){
//agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('tinkerApp', [ 'ngRoute','agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-
multiselect','ngSanitize','nvd3','hljs']);
})();
(function(){
angular.module('tinkerApp', [ 'ngRoute', 'agGrid', 'ngAnimate',
'ngMessages', 'ngMaterial',
'material.svgAssetsCache','ngCookies',
'dropdown-multiselect','ngSanitize','nvd3','hljs']);
"use strict";
var app = angular.module('tinkerApp');
app.config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
}).otherwise('/');
});
})();
And here are the css and script data I call inside index.html
<!--********* CSS *********-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/ng-modal.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" type="text/css" href="css/select.css">
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-fresh.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-dark.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-blue.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/ag-grid/dist/styles/theme-extreme.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-material/angular-material.css" />
<link rel="stylesheet" type="text/css"
href="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/se-1.2.2/datatables.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" />
<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">
<!--********* JAVASCRIPT *********-->
<script type="text/javascript" charset="utf8"
src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular/angular.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-material/angular-material.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-messages/angular-messages.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/svg-assets-cache.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/ag-grid/dist/ag-grid.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/lodash/lodash.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-dropdown-multiselect/dist/angular-dropdownMultiselect.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/d3/d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/node_modules/nvd3/build/nv.d3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/angular-nvd3/dist/angular-nvd3.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.core.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.0/xlsx.js"></script>
<script type="text/javascript" charset="utf8"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8"
src="node_modules/bootbox.min.js"></script>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script type="text/javascript" charset="utf8"
src="js/directives/templates.js"></script>
Okay after more tinkering I discovered it was some basic thing I was missing. I'd defined 'ngMaterial' when I set up the app, but hadn't added $mdMedia as a dependency when I set up the controller. As soon as I did that, it worked. Thanks for the input everyone!
Your missing a function to trigger the change i.e
selectedTab
<md-tabs md-selected="selectedTab">
<md-tab label="One">
<p class="tab-content">Tab One content</p>
</md-tab>
<md-tab label="Two">
<p class="tab-content">Tab Two content</p>
</md-tab>
<md-tab label="Three">
<p class="tab-content">Tab Three content</p>
</md-tab>
</md-tabs>
Define the function in the controller
$scope.selectedTab = 0;
$scope.changeTab = function() {
if ($scope.selectedTab === 2) {
$scope.selectedTab = 0;
}
else {
$scope.selectedTab++;
}
}
Source from another question: See the answer
I have the following piece of code in my front end. I couldn't get the timepicker to show up. Any help please?
<!DOCTYPE HTML>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<script type="text/javascript">
$(() => {
$('#timepicker1').timepicker();
});
</script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</body>
<html>
I have all the required source files in my the correct path as mentioned in the code above. Also, I am not seeing any errors in the browser logs. Please help me fix this.
Thank you all
EDIT: I have now used the direct cdn links for all the source files as provided in jsfiddle.
To use the time picker on bootstrap. You must use the datetimepicker component. And use the format property to allow only hours and minutes to be captured
<!DOCTYPE HTML>
<html>
<head>
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.7/js/moment.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script>
<script src="bootstrap-3.3.7/js/transition.js"></script>
<script src="bootstrap-3.3.7/js/collapse.js"></script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<script type="text/javascript">
$(function () {
$('#timepicker1').datetimepicker({
format: 'HH:mm'
});
});
</script>
</body>
<html>
rel="stylesheet" was missing in one of the css tags. That was the issue.
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps
My textbox renders very differently on IE and Chrome
IE
Chrome
You can see that width of textbox is small in IE.
My html is defined as
<input id="Name" data-bind ="value:Name" style="width: 210px"/>
I tried downloading normalize.css and included at top of my scripts , but still it renders incorrectly on different browsers.
I am sure there would be more input required, so do let me know what you guys need to resolve my issue.
These are the scripts i am using
<link href="css/normalize.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery/jquery-1.7.2.js"></script>
<link href="../Myfolder/External/jQuery UI/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script src="../Myfolder/External/jQuery UI/js/jquery-ui-1.8.20.custom.min.js"></script>
<link href="../Myfolder/Styling/common.css" rel="stylesheet" />
<script src="../Myfolder/External/Knockout/knockout-2.2.0.js"></script>
<script src="../Myfolder/External/JSON/json2.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/koExternalTemplateEngine_all.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.validation.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout.mapping-latest.js"></script>
<link href="../Myfolder/External/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="../Myfolder/External/Bootstrap/css/responsive.css" rel="stylesheet" />
<script src="../Myfolder/External/Bootstrap/js/bootstrap.js"></script>
<script src="../Myfolder/External/Kendo/kendo.web.min.js"></script>
<script src="../NewUI2013/AgrOD/external/amplify/amplify.min.js"></script>
<script src="../Myfolder/External/Knockout/Plugins/knockout-kendo.min.js"></script>
<script src="../Myfolder/External/Knockout/knockout.dirtyFlag.js"></script>
<script src="../Myfolder/Custom/customKO.js"></script>
<script src="../Myfolder/Custom/custom.js"></script>
Set height:25px or any other value should solve the issue. The problem most likely that since you used so many css files of external source, the browser maybe misinterpreting some of them.
I'm trying to create a datebox with dateFormat, but it looks like dateFormat won't work.
It gives day/month/year, but I want only month/year.
this is my jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"calbox","dateFormat":"%m/%Y"}' />
</div>
</body>
</html>
I saw this thread, but still I don't understand why it's not working.
It seems like there's an issue in the code that you've provided:
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Contains some hidden characters in between "js". Normally, it would be a hex of 6a73, but in your case, it is 6ae2808ce2808b73 for some reason, so change that link to
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Proof
However, to answer your question, try using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"datebox","overrideDateFormat":"%m/%Y","overrideDateFieldOrder": ["m", "y"],"calUsePickers": true, "calNoHeader": true,"calShowDays": false,"calMonthMode": true}' />
</div>
To force a month/year selection only
Live Demo | Source