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>
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.
enter image description hereenter image description hereAm using materializecss plugins for forms. Its working fine in html page but while I used in .Net core MVC view select option dropdown is not working. its shows error in console..enter image description here
'code'
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="~/css/materialize.min.css" rel="stylesheet" />
<script src="~/js/jquery.min.js"></script>
<script src="~/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').formSelect();
$('.datepicker').datepicker();
});
</script>
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
I did a test using Materialize plugins in .NET Core MVC view page, which work well on my side, please refer to it.
<div class="container body">
<div class="col-md-12 col-sm-12 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">assignment</i>
<select id="ddlAssignment">
<option value="" disabled selected>Choose your option</option>
<option value="1">Carolinas, Main</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Assignment</label>
</div>
</div>
<div class="col-md-6 col-sm-6 form-group has-feedback">
<div class="input-field">
<i class="material-icons prefix">event_note</i>
<input type="text" class="datepicker">
<label class="dated-lbl" for="icon_prefixsd">Service Date</label>
</div>
</div>
</div>
#section scripts{
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$('select').formSelect();
$('.datepicker').datepicker();
</script>
}
You can create a new view page and include materialize from CDN as I did in above sample, then test if it can work well within your project. Besides, to check if any conflicts with other jquery files (referenced in layout file) cause the issue, please set Layout = null; to use no layout for your view page.
I want to position 2 dropdowns side by side next to a searchbar I have but I can only position them under it. I hope someone can help me. Below is my code
<div>
<div class="input-group">
<div class="icon-addon">
<input type="text" id="search" class="form-control"
placeholder='Type to filter the table...'>
<label style="z-index: 22" for="search" class="fa fa-search" rel="tooltip"
title="search"></label>
</div>
</div>
</div>
</div>
<select class="form-control" style="width: 105px;">
<option>Festpreis</option>
<option>Stundenbasis</option>
</select>
heres the code for it:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="author" content="Vojtěch Matras">
<title>Admin Express Blogs&Magazines</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-2"><input type="text" id="search" class="form-control"
placeholder='Type to filter the table...'></div>
<div class="col-2"> <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </div>
<div class="col-2"> <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </div>
</div>
</div>
</body>
</html>
you can check in fiddle: https://jsfiddle.net/a006rj3n/ resize the browser window to see responsiveness
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>
I have a page with an <asp:FileUpLoad> tag that I place a glyphicon into. When I click on the submit button without selecting a file, bootstrapvalidator flags the field as invalid and displays the error message. The issue is that the glyphicon icon gets stretched to include the <asp:FileUpLoad> field and the bootstrap error message.
This is what the form looks like prior to clicking on Submit:
and this is what it looks like after I click on Submit:
Here is the code that I am running:
<head runat="server">
<title></title>
<script src="../Scripts/modernizr-2.6.2.js"></script>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-file"></i>
</span>
<asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
</div>
<br /><br />
<div class="col-md-1 col-md-offset-3">
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span> Cancel
</asp:LinkButton>
<button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
</span> Validate
</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#contactForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'The file name is required'
}
}
}
}
})
})
</script>
</body>