How to add a bootstrap datepicker on a website? - html

I found the below code from the website mentioned below after my two-days search for a bootstrap datepicker for my website. Being a newbie I do not know how to implement but I gave it a try, however, I did not get the result as expected, I got only an inputfield but no datepicker. Can somebody help me implement the code?
I create a test.html file in my project and added the below code to test.
NOTE: This is the only code I have for datepicker.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
</div>
</div>
<script>
// Data Picker Initialization
$('.datepicker').pickadate();
</script>
</body>
</html>
Source of the code

In your input tag with id=date-picker-example replace type field with "date". I mean the code of your input field will be like this.
<input placeholder="Selected date" type="date" id="date-picker-example" class="form-control datepicker">
I hope this solves your problem.

Related

How to show X (Clear) in Chrome INPUT with type Search while using bootstrap?

I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
</body>
</html>
In properties I see something like this:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?
This happens because bootstrap (from normalize.less) overrides the default user agent styles.
You can override this from your CSS like below
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
Working sample (tested in chrome)
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">

I can't see my D3.js design by open the HTML file

I'm working on d3.js design.
I'm using the python server to see my design by browser.
the problem is I can't see my design by just open the HTML file .
thank you
the index.html file
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Flag example</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styling -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>x
<!-- Bootstrap grid setup -->
<div class="container">
<div class="row">
<div id="chart-area"></div>
</div>
</div>
<!-- External JS libraries -->
<script src="js/d3.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>
</body>
</html>

How to print dropdown selection value in Print.js?

please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...
https://codepen.io/markchavush/pen/WWrWda
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<form method="post" action="#" id="printJS-form">
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
</form>
<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
Print Form with Header
</button>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>
Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...
Cheers
Mark
You can't, not with the Print.js library.
The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.
My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.

Why the date-label is on input with Materialize?

I am developing a web application with Materialize and I need to use date but the label text is on of the input, How can I resolve it?
It is all the simple code:
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<!-- Compiled and minified JavaScript -->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<div class="input-field col m6">
<i class="material-icons prefix">picture_in_picture</i>
<input id="hello_id" type="date"/>
<label for="hello_id">Hello, this text is a test</label>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>
Thank you!

My code is not showing columns horizontally

My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/