Datepicker datetime format is not working while running the application in Azure - asp.net-core

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.

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>
//...

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>

Semantic UI calendar

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>

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:

jquery mobile add click event on nested button

i have a nested buttons and im trying to add click events on it but it seems not to be working.
this is my object
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
im trying to add click event on id="rpc-eor" button using
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
alert("yay!");
});
but the event wont fire. what is the matter? please help! thanks in advance
I am seeing the console.log output as expected in this demo I ran in Chrome, using jQuery.mobile 1.0b1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div:jqmData(role='page')").live('pageshow',function(){
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
console.log("yay!");
});
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
</div>
</div>
</body>
</html>
Note: there is no document.ready() for jQuery.mobile so if you have wrapped the jQuery in just document.ready() then it might be causing your problem. It is better to bind on $("div:jqmData(role='page')").live('pageshow',...); to guarantee that the page is ready. That said, in this simple case it still works without the .live bind.
Try only the id
$("#rpc-eor").click(function(){
alert("yay!");
});