Bootstrap3 DateTimePicker: minDate option set the input value field - twitter-bootstrap-3

I have a problem where setting the minDate option set the input value field. Why??
(When I write this post, input date is after minDate)
Html:
<div class="row">
<div class="col-md-12">
<h6>datetimepicker</h6>
<input type="text" class="form-control" id="datetimepicker" value="21/12/2016"/>
</div>
</div>
Javascript:
$('#datetimepicker').datetimepicker({
locale: 'fr',
//minDate: moment(), If I uncomment it the input value field changes to current date
format: 'DD/MM/YYYY'
});
Fiddle

You have to add the useCurrent option and set it to false.
Here a working example:
$('#datetimepicker').datetimepicker({
locale: 'fr',
minDate: moment(),
useCurrent: false,
format: 'DD/MM/YYYY'
});
<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.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.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.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-md-12">
<h6>datetimepicker</h6>
<input type="text" class="form-control" id="datetimepicker" value="21/12/2016"/>
</div>
</div>

Related

text box change value event looks like not firing in with eonasdan-bootstrap-datetimepicker

I have a textbox bound with datetime picker. What I have to do is on change of value in the text box if another input textbox (which also bound with datetimepicker) is empty I have to fill the value from initial textbox.
at the moment just trying to catch events but unable to success
my asp.net core razor code is given below
<div class="filters-list">
<div class="form-group">
<div class="input-group date">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
#section Scripts {
<script>
$(document).ready(function () {
//try to print date value of txtFirst text box at on change event
});
</script>
}
if i put datetimepicker in js I got double date time picker
Do you mean you want to bind a datetime picker change event? Try this way:
$(document).ready(function () {
$("#txtFirstDate").datetimepicker();
$("#txtSecondDate").datetimepicker();
$('#txtFirstDate').on('dp.change', function (e) {
console.log(e.date._d);
})
});
Test Result:
Update:
It seems that the components we use and the methods we call are not the same. I will share all the libraries I use and the calling methods, I hope it will help you.
View:
<div class="filters-list">
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input id="txtFirstDate" name="FirstDate" type="text" class="form-control" asp-for="FirstDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="FirstDate" class="error"></span>
</div>
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input id="txtSecondDate" name="SecondDate" type="text" class="form-control" asp-for="SecondDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span asp-validation-for="SecondDate" class="error"></span>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#datetimepicker").datetimepicker();
$('#datetimepicker').on('dp.change', function (e) {
console.log(e.date._d);
})
$("#datetimepicker2").datetimepicker();
$('#datetimepicker2').on('dp.change', function (e) {
console.log(e.date._d);
})
});
</script>
_Layout.cshtml:
//...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
//...
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
//...

How to prevent bootstrap from "drop" at mobile screen size?

For example, I have this
.form-group select {
display: inline;
}
<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>
<div class="col-xs-12">
<div class="form-group form-inline">
<input class="form-control" type="number" name="currency_from_amount" id="currency_from_amount">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
When the screen become smaller, the dropdownlist "drop" into another row which is not what I want. How do I maintain to make it inline (two columns in one row) even it is mobile size?
Expected output is:
But current output is
Here is the solution for your expected output. You need to wrap the input and select box in a row by specifying the col size as per your requirement.
.container {
padding: 10px;
}
.nopadding {
padding: 0 !important;
margin: 0 !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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
</div>

Datepicker datetime format is not working while running the application in Azure

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.

bootstrap Datetimepicker remove days of previous or next month from the current month

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>

How to get Bootstrap Datepicker calendar to anchor below textbox

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: