HTML5 Datetime-Local picker Custom placeholder - html

I am using a HTML5 datetime-local picker, is there anyway I can place a custom placeholder text?
HTML Code:
<input id="dt" onchange="dateTimeFormat()" class="input" type="datetime-local">
By default it looks like this:
Theres not many resources into styling this, so any help is much appreciated!
TIA

I think might solve your problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Yess You can use this:-
<input id="dt" class="input" onfocus="(this.type='date')" placeholder="hello">
use onfocus="(this.type='date')" and then you can use placeholder as per you wise
Or
You can use this CSS trick to do this:-
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
after attaching this to your input date, then you can use the placeholder with the dates
For example:-
this is an HTML code with the above-mentioned CSS code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}
</style>
</head>
<body>
<input type="date" name="date" id="date" placeholder="Hello">
</body>
</html>

Related

How to make a draggable element using JQuery?

I'm trying to make an element draggable using JQuery
I tried this but it didn't work because the scripts are not working and it looks like there isn't a link. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
it looks like you did not have the files js/jquery-1.3.2.min.js and js/jquery-ui-1.7.1.custom.min.js present in your file system. I have replaced the files with CDN.
Find CDN here:
https://cdnjs.com/libraries/jquery
https://cdnjs.com/libraries/jqueryui
It doesn't necessarily need to be written after page load. But it can increase initial load time in some cases!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
The order in your code plays an important role in things .. You need to load your scripts AFTER the DOM loads .. Also -- Religiously view your DevTools F12 -- The console gives vital information about DOM elements not being found, loaded etc etc ..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#drag {
width: 100px;
height: 100px;
cursor: all-scroll;
background-color: aqua;
}
</style>
</head>
<body>
<div id="drag"></div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<script>
$( function() {
$( "#drag" ).draggable();
});
</script>
</body>
</html>

Can't reduce the height of the textbox

Can't override and reduce the height of a bootstrap textbox.
<div class="form-group row">
<label class="col-xl-3">Posted Speed Limit (mph)</label><input type="text" class="col-xl-1 ps" autocomplete="off" id="sl" onkeydown="return keyval(event)" onkeyup="return valkey(event)" name="num3" required="required"><span id="rspan" class="rspan"><span>⚠</span>Enter a numeric value > 0 and ≤ 90</span></input>
</div>
The above is my input tag and below is the css for class = "ps"
.ps{
min-height: 2%;
}
I can't increase or reduce the height. when it comes to the width, I can increase it but can't reduce it.
How do i solve this?
I have tried your code. In my opinion, you should try with id. It may happen that the CSS of the col-xl-1 class is overwritten on your CSS. Or else what you can try is !important to emphasize your CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
#txtBox1 {
margin: 10px;
min-height: 50px;
}
</style>
</head>
<body>
<form>
<input type="text" class="col-xl-1 ps" id="txtBox1">
<button class="btn btn-primary">Submit</button>
</form>
</body>
</html>

Blue outline of custom switch input doesn't want to disappear

So I'm using bootstrap and I'm trying to remove the blue outline around the custom switch button when I click on it, but I can't remove it, I'm using chrome. Here is my code:
#test:focus,
#test:active,
input:focus,
input:active
{
outline: none !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
hello how are you doing
<div class="custom-control custom-switch mx-auto shadow-none">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label id="test" class="custom-control-label" for="customSwitches"></label>
</div>
</body>
</html>
You have to remove it on the following CSS selector:
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none;
}
https://www.codeply.com/go/eAUIJbpS2I
Additionally, if you want to remove the light blue border from the switch when focused use:
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: #adb5bd;
}

How to print the text dynamically on the image in html using angularjs in two way binding method?

In this code the text is printing on the side of the image but I need on the image so please help me to finish. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<img src="DHONI.jpg">{{Username}}
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
</script>
</body>
</html>
You need to wrap the {{ Username }} in a <div> and give it position: absolute. Also wrap the img and this div inside a parent div with position: relative. See code below:
var App = angular.module("myapp", [])
App.controller('connection', function($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
}
});
.ctn {
position: relative;
}
.u-name {
position: absolute;
top: 5px;
left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username"><br><br>
<div class="ctn">
<img src="https://via.placeholder.com/150">
<div class="u-name">{{Username}}</div>
</div>
<div class="centered"></div>
<button ng-click="submit(Username)" hidden>Submit</button>
</form>
</div>
</div>
<script>
</script>
</body>
</html>

Unable to center input elements inside a div

I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>
try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}