I'm using DateTimePicker for the following project : https://www.malot.fr/bootstrap-datetimepicker/demo.php, I have two dates that I deactivate and I would like to put a red background on those dates.
Note : I use bootstrap 3
Code
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Calendario</title>
<script src="js/jquery-3.2.1.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.js"></script>
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.es.js" charset="UTF-8"></script>
</head>
<body>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var dates = ["11/11/2017","12/11/2017"];
$('.form_date').datetimepicker({
language: 'es',
format: 'dd/mm/yyyy',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
datesDisabled: dates
});
</script>
</body>
</html>
style.css
.datetimepicker table tr td.disabled {
background: red;
color: black;
}
.datetimepicker table tr td.disabled:hover {
background: red;
color: black;
}
The problem is that it does not work, try modifying .datetimepicker by .datepicker but it does not work either
How do I solve this problem?
You are probably including your style.css before the bootstrap-datetimepicker.min.css. As the selectors in your style.css are equally specific as the selectors in bootstrap-datetimepicker.min.css your rules are overwritten. Simply changing the order should solve your problem.
Related
This question already has answers here:
move the position of bootstrap datepicker
(5 answers)
bootstrap date picker position
(2 answers)
Closed 2 years ago.
I have these datepickers and I want to move the position of each one to the right of each input instead of being in the left.
I tried so many css solutions but nothing seems to work.
<html>
<head>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function () {
$('#beginning_date').datepicker({
language: 'fr'})
$('#ending_date').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
Just use orientation: 'right'
<html>
<head>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'right'
})
});
</script>
</body>
</html>
We can use oreientation: 'top right' for show the datepicker on top the input instead of the bottom.
<html>
<head>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'top right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'top right'
})
});
</script>
</body>
</html>
Change left property value for the div.datepicker element to auto, and set right property value to the previous value of left property.
div.datepicker {
left: auto;
right: 15px;
}
I am trying to implement a date-time calendar using Bootstrap, and when I'm using the datetimepicker, no dates or times are being made available to select. The libraries needed for datetimepicker are already downloaded and in the respective folders within the directory.
Here is my code:
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- Theme CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class='col-sm-6'>
<div class="form-group">
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUdatetime'>
<input class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap-datetimepicker.js"> .</script>
<script src="vendor/bootstrap/js/locales/bootstrap-datetimepicker.fr.js"></script>
<script type="text/javascript">
$(function () {
$('#carPUdatetime').datetimepicker();
});
</script>
</body>
Your problem is that you called datepicker on the div and not the input.
Change
<input class="form-control" type="text" required/>
to
<input id="testInput" class="form-control" type="text" required/>
and update your javascript to
$(function () {
$('#testInput').datetimepicker();
});
Move the id='carPUdatetime' from the div to the input:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii">
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
That's not exactly an answer to your question, but the value of the for attribute in the label must be an HTML control, not div.
Apart from that, the code in your question works fine and the dates are displayed.
If you want to keep the calendar with the div, then give the input a different id from the div:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUcalendar'>
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#carPUcalendar').datetimepicker();
});
</script>
I am working on a popup calender, but it is not working as i expected.
I need some help to add a datetimepicker code for bootstrap.
The following code contains a simple Hello World, as well as the datetimepicker textbox, but not the picker.
<html lang="en">
<head>
<title>Bootstrap Example</title>`enter code here`
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/one-page-wonder.css" rel="stylesheet">
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>Hello World</p>
</div>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
$('.form_date').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
</body>
</html>
I am using bootstrap-datepicker
library for bootstrap.
Please check source code below. It is very simple.
You just need to make sure that you have added required libraries and in correct order.
You don't need to have local libraries for this you can use any CDN provider, like I am using cdnjs.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
I'm experiencing some styling issues when using Select2 in combination with Bootstrap 3. I found out all about the Select2 Bootstrap 3 CSS but I can't get it to work properly.
This is how it looks like.
As you can see it's too wide, the search glyphicon doesn't seem to appear and the placeholder isn't showing either.
This is how my code looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="~/Content/select2.css">
<link rel="stylesheet" href="~/Content/select2-bootstrap.css">
<link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<br />
<form class="form-horizontal">
<fieldset>
<legend>General data</legend>
<div class="form-group">
<label for="inputRequester" class="col-lg-2 control-label">Requester</label>
<div class="col-lg-10">
<input type="text" class="form-control input-sm" id="inputRequester" placeholder="Requester" value="#System.Environment.UserName" readonly>
</div>
</div>
<div class="form-group">
<label for="datepickerino" class="col-lg-2 control-label">Delivery date</label>
<div class="col-lg-10">
<input type="text" class="form-control input-sm" id="datepickerino">
</div>
</div>
<div class="form-group">
<label for="inputProject" class="col-lg-2 control-label">State</label>
<div class="col-sm-4">
<select id="inputProject" class="form-control input-sm select2">
<option value="AL">Alabama</option>
...
</select>
</div>
</div>
...
</fieldset>
</form>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>
<script>
$( ".select2" ).select2( { placeholder: "Select a State", maximumSelectionSize: 6} );
</script>
After another couple of hours it looks like I solved most of my issues:
Fixed the width by adding a width attribute to the JS code:
$(".select2").select2({
placeholder: 'Select a country',
maximumSelectionSize: 6,
width: 'resolve'
});
Fixed the placeholder by adding an empty option to my select:
<option></option>
Still can't get the search glyphicon to show up tho.
Is there any cross-browser way of getting what the password masking character is in <input type="password"> fields, or, barring that, to set it?
For example, Chrome & Firefox & Safari on OSX use •, while Safari on iOS 7 uses ●. Perhaps other browsers might use the old-fashioned * - I don't know.
It seems like this was asked previously as well. Check out change password char in HTML which states it can't be done.
Quick search shows that it can be done via JS by faking it and can't be done on a regular password field since it's defined by the browser. Refer to http://www.htmlforums.com/showpost.php?p=655392&postcount=4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
}
}
}
</script>
</head>
<body>
<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>
<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>
</body>
</html>
this is a full implementation with styling and handling . i hope you like it :)
function showHidePassword(passSelector, textSelector) {
if ($(passSelector).hasClass("hidden")) {
$(passSelector).val($(textSelector).val());
$(textSelector).addClass("hidden");
$(passSelector).toggleClass("hidden");
}
else {
$(textSelector).val($(passSelector).val());
$(passSelector).addClass("hidden");
$(textSelector).toggleClass("hidden");
}
}
.hidden{
display:none !important;
}
<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>