I want to use datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/index.html with Bootstrap 4.
Following the examples on above page, I can make it work with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Using this code datepicker appears correctly.
But doing the same with Bootstrap 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Makes it look less professional:
Looks like font and spacing are messed up in Bootstrap 4 version.
How can I get same look and feel of datepicker in Bootstrap 4?
Thanks
You can too override default datepicker classes like the following:
the default bootstrap font size is 1rem or 16px so update .datepicker class
font-size: 0.875em; or/and update the cell width and height:
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
// solution 1:
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
From documentation:
bootstrap-datepicker.standalone.css
can be used to include the datepicker without depending on the Twitter Bootstrap library.
You can try out https://github.com/satyandra-softuvo/bootstrap4-datetimepicker
$.extend(true, $.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
Related
My test is very basic like this web page below. I don't understand why on iphone 6 or 5 Foundation seems not working. Do you have any idea ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/css/foundation.min.css" integrity="sha256-iJQ8dZac/jUYHxiEnZJsyVpKcdq2sQvdA7t02QFmp30= sha384-SplqNBo/0ZlvSdwrP/riIPDozO5ck8+yIm++KVqyMAC53S6m3BaV+2OLpi7ULOOh sha512-ho6hK4sAWdCeqopNZWNy1d9Ok2hzfTLQLcGSr8ZlRzDzh6tNHkVoqSl6wgLsqls3yazwiG9H9dBCtSfPuiLRCQ==" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites#6.5.0-rc.2/dist/js/foundation.min.js" integrity="sha256-G6jsRyH1fxbsvFIXSCuwYmI1aIDYBa28xscrvmYjJy0= sha384-vtoG68NvPc9azmFJr447vvY8qgdyA4FdaJ5/bqvzIM4eAdZfO0iyRRF8l2AAscYI sha512-43seCcNrHA0BQgrtyajB9sp8yOdv5c8QdYvgjP7zJ7v+dmzAcxYDQ2gupb9aztsNWBq1COIp/3NHYkQs4l/dkg==" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">
<div id="info"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="info4"></div>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>
</div>
</div>
</div>
<script>
$(document).foundation();
$(document).ready(function(){
$("#info").html($( window ).width());
$("#info2").html(JSON.stringify(Foundation.MediaQuery.queries));
$("#info3").html(Foundation.MediaQuery.current);
$("#info4").html(window.devicePixelRatio);
});
</script>
</body>
</html>
The result is medium any way flex grid or x-y grid.
I use sass for my project but for this test i use directly the full official cdn file. I still get same result.
This is my plunker url and code snippet:
http://plnkr.co/edit/lUB8pYKRn5JudhToxykj
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap#3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.
So how to set it up right?
Thanks much!
Zhen
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
I need a program that includes two buttons to increase and decrease the number and display it
As well as storage and display number after close and open app
for storage data you can use angular-local-storage for get https://github.com/grevory/angular-local-storage
for load data use $scope.storageValue = localStorageService.get('StoreData');
for save data use localStorageService.set('StoreData',$scope.storageValue);
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- save and load in Local -->
<script src="js/angular-local-storage.min.js"></script>
<script>
angular.module('app', ['ionic','LocalStorageModule'])
.controller('AppCtrl', function($scope, localStorageService) {
// save and load
$scope.storageValue = localStorageService.get('StoreData');
// add salavat
$scope.add=function(){
$scope.storageValue++;
localStorageService.set('StoreData',$scope.storageValue);
}
// sub salavat
$scope.sub=function(){
$scope.storageValue--;
localStorageService.set('StoreData',$scope.storageValue);
}
})
</script>
</head>
<body ng-app="app">
<ion-content>
<div style="height:100%; text-align:center" ng-controller="AppCtrl">
<div class="item item-icon-left" href="#">
<span>Number : {{storageValue}}</span> <br>
<button class="button button-positive" ng-click="add()">
+
</button>
<button class="button button-positive" ng-click="sub()">
-
</button>
</div>
</div>
</ion-content>
</body>
</html>
pic
mmenu crashes the page when used with Google Publisher Tags (async), as soon as the page loads the css formatting and html structure seems to be lost and all further javascript execution stops. It can be reproduced by adding a google publisher tag in the demo file of mmenu download.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
(function() {
var useSSL = 'https:' == document.location.protocol;
var src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
</script>
<script type='text/javascript'>
googletag.defineSlot('/5910/symall/ROS', [1, 1], 'div-gpt-ad-1403693262284-0').addService(googletag.pubads());
googletag.pubads().enableSyncRendering();
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
</script>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../src/css/jquery.mmenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../src/js/jquery.mmenu.min.js"></script>
<script type="text/javascript">
$.fn.mmenu.debug = function( msg ) {
console.log( msg );
};
$(function() {
$('nav#menu').mmenu();
});
</script>
</head>
<body>
<div id="page">
<div class="header">
Demo
</div>
<div class="content">
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>For more demos, a tutorial, documentation and support, please visit mmenu.frebsite.nl</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>The team
<ul>
<li>Management</li>
<li>Sales</li>
<li>Development</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- SYMALL/ROS -->
<div id='div-gpt-ad-1403693262284-0'>
<script type='text/javascript'>
googletag.display('div-gpt-ad-1403693262284-0');
</script>
</div>
</body>
</html>
I just downloaded PhoneGap to try it. I made an XCode Project and it's working alright. Then, I wanted to try some jQuery Mobile on it, so added this to the default Hello World Page of Cordoba:
I added, to the head:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
And then on the body:
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
I thought it would go fine, but look how it comes out:
Here's all the code in case you want to take a look at it. Am I doing something wrong?
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div>
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body> </html>
I was missing the
<div data-role="content">
wrapping the list. That was all.
Here's all the code in case it's useful for someone:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Apache Cordova</h1>
</div>
<div>
<h1>Some text</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>