I would like to remove days of previous or next month from current viewing month of datetimepicker calendar. to let you understand exactly what I mean I am attaching the screen shot where I highlighted exactly what I need to remove
Following code will be helpful to you,
$('#datetimepicker8').datetimepicker().on('show', function(e) {
});
.bootstrap-datetimepicker-widget table tr td.new { display: none; }
.bootstrap-datetimepicker-widget table tr td.old { visibility: hidden; }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker8' class="datepicker">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
</div>
</div>
Related
I am calling the datetime picker to enter the date in dd/mm/yyyy format. I am using the following css and js file in layout file
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<style rel="stylesheet"
href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></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>*#
my view file is given below
<script>
$("#TaxDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#MOTDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#InsuredDate").datepicker({ dateFormat: "dd/MM/yy" });
$("#RegDate").datepicker({ dateFormat: "dd/MM/yy" });
</script
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Vehicles.MOTDate" class="control-label col-3 col-form-label">MOT Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="MOTDate"
asp-for="Vehicles.MOTDate" />
<span asp-validation-for="Vehicles.MOTDate" class="text-danger">#ViewBag.moterror</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Vehicles.TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="TaxDate"
asp-for="Vehicles.TaxDate" />
<span asp-validation-for="Vehicles.TaxDate" class="text-danger">#ViewBag.taxerror</span>
</div>
</div>
</div>
</div>
But when I run the published site in azure , the date time 'dd/mm/yyyy' format is not working. it is still working as 'mm/dd/yyyy' .
If am going to run in application in localserver it will work . When I run azure it is not working please help to fix
UPDATE
This problem was finally solved by modifying CultureInfo. The sample code is as follows.
Setting the following in StartUp.Configure
var cultureInfo = new CultureInfo("en-US");
CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
CultureInfo.DefaultThreadCurrentUICulture = cultureInfo;
PRIVIOUS
Usually we solve this problem, first ensure that there is no problem with the published file, you can use other methods such as FTP to publish, local testing and deployment to Azure testing.
I have a simple row and 4 columns in there. it displays in one row as long as screen size is MD and above. I wanted to hide these columns so I have added two bootstrap classes in the row that are "d-none d-md-block" as per the documentation it should hide as soon as screen size goes below md.
But the output is weird, for some reason, my columns are not in one row anymore but it displays one below another.
any help??
here is the code, columns should be in one row as long as the screen size is larger than md.
<div class="d-none d-md-block row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</div>
This is it:
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="d-none d-sm-block">
<div class="row">
<div class="col">1</div>
<div class=" col ">2</div>
<div class=" col">3</div>
<div class=" col">4</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
you can check : https://jsfiddle.net/sugandhnikhil/muxt6eg1/
Just change d-md-block to d-md-flex and it'll work because by default row has display:flex property in Bootstrap and you are assigning it display:block property
<div class="d-none d-md-flex row">
<div class="col-md-3">
<div>1</div>
</div>
<div class="col-md-3">
<div>2</div>
</div>
<div class="col-md-3">
<div>3</div>
</div>
<div class="col-md-3">
<div>4</div>
</div>
</div>
A very simple code for the semantic ui calendar but the calendar doesnt appear. Can someone please explain why.
<div>
<br/>
<h2 class="ui header">
<i class="calendar icon"></i>
<div class="content">
Set Lifetime of Form
</div>
</h2>
<select class="ui selection dropdown">
<option value="">Choose Application Form Type</option>
<option value="1">Application Form 1</option>
<option value="0">Application Form 2</option>
</select>
<br/>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
</div>
<script type="text/javascript">
$('#example1').calendar();
</script>
Your code already works. Just need to double check the resources.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
https://jsfiddle.net/vandolphreyes29/xy3guqfv/
Move the jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#example1').calendar();
});
</script>
Why dont I see the input group addon just beside the textbox ?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
</head>
<style>
input
{
max-width: 280px;
}
</style>
<body>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" />
<span class="input-group-addon" id="basic-addon1">#</span>
</div>
</body>
</html>
What do I need to do to display the content of the span after the textbox adjacent to it without any gap.
Your problem is the max-width you are putting on the input. try putting it on the input-group instead like:
.input-group {
max-width: 280px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">#</span>
</div>
I am having trouble getting the Bootstrap Datepicker calendar to anchor/popup below the entry textbox. Any advice?
Here is my markup, etc.:
<head>
...
<!-- Bootstrap: Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap: Datepicker Plugin -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
...
</head>
<body>
...
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="tour_date">Service Date</label>
<div class="input-group date col-md-2">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<label class="col-md-2 control-label" for="tour_time">Service Time</label>
<div class="input-group bootstrap-timepicker timepicker col-md-2">
<input id="timepicker" type="text" class="form-control input-small" data-minute-step="30">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</div>
</div>
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Bootstrap: Bootstrap Datepicker Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script>
$('#tickets .input-group.date').datepicker({
autoclose: true,
todayHighlight: true,
datesDisabled: ['01/01/1970', '12/31/2099']
});
</script>
</body>
Screen Shot - My Behavior
Screen Shot - Desired Behavior
Amended with added styling issues: