We Keep Coding

datetimepicker not opening when pressing on button

im trying to make a website, and I need a calendar so that the users can plan in a meeting. I tried getting a datetime picker from the internet, but when I run the page and press the button, the calendar is not opening. (im doing this in visual studio code ASP.net C#/html). I have no idea why
Here is the code:
#page
#model IndexModel
#{
ViewData["Title"] = "Test";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>

It's best to use the native date picker to avoid cross-browser issues.
Remove these lines of code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
And replace this line:
<input type='text' class="form-control" />
With this line:
<input type='date' class="form-control" />
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='date' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>

Not able to change size of input box in bootstrap, it is default set to input-sm

I wanted to put datetime picker, I am able to do it but my input box in smaller even if I put 'form-control input-lg'. Please suggest how can I change its size.
Also I wanted to overlap this datetime picker icon on text box.
Below is my code:
$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1" class="input-append">
<span class="add-on"> <i data-time-icon="icon-time"
data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>

You have div class overriding bootstrap
id="dateOfAlert1" class="input-append
remove the input-append or edit the input in that class.
$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1">
<span class="add-on"> <i data-time-icon="icon-time"
data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>

$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
.add-on{
position:relative;
}
.add-on .date-icon{
position:absolute;
top:0px;
left:0px;
}
.add-on{
width:50px!important;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1" class="input-append">
<span class="add-on"> <i data-time-icon="icon-time" class="date-icon" data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>

Bootstrap 3.3.5 Datepicker not working

i am trying to get the Bootstrap Datepicker to work on my website but the button seems to be disabled and doesn't do anything when i click on it or the input form box here is my test code I am not sure what i am doing wrong here. i am using bootstrap 3.3.5
<!DOCTYPE html><html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="form-group">
<div class="input-group date" id='datepicker'>
<input type="text" class="form-control" placeholder="Birthdate yyyy/mm/dd">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</form>
</center>
</body>
</html>

<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<legend>Bootstrap-datepicker set date sample</legend>
<div class="form-group">
<label for="exampleInputDate">Some special date</label>
<input type="text" class="form-control" id="exampleInputDate">
</div>
</fieldset>
</div>
</div>
</div>
here is the javascript file
var firstDayOfMonth = function() {
// your special logic...
return 5;
};
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear,currMonth,firstDayOfMonth());
$('#exampleInputDate').datepicker('setDate',startDate);
This should work perfectly
here is the plunker

Creating and using custom pattern on Foundation 5

I'm trying to use custom patterns in Foundation 5.
Here is my code
<head>
<meta charset="utf-8">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
<script>
$(document).foundation(
{
abide:{
patterns:{
wallet: /^D[A-Za-z0-9]{33}$/
}
}
}
);
</script>
</body>
Why when I introduce a valid adress (ex: DRzKV3Vr235MTuGuVZ4eHjZfmy4TsymDX4) it still says I have an invalid adress?

I made the following changes:
I made sure to set the type to text/javascript (some browsers may need this).
I added the {1} following the first D character in the regex pattern.
Used an updated regex pattern that should make sure all of the address characters are valid for Base58 addresses.
Edit: Fixed HTML display
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
$(document).foundation(
{
abide:{
patterns:{
wallet: /^D{1}[5-9A-HJ-NP-U]{1}[1-9A-HJ-NP-Za-km-z]{32}$/
}
}
}
);
</script>
</body>
Or you could try the following approach using jQuery's extend method to set the pattern:
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vendor/modernizr.js"></script>
</head>
<body>
<form name="input" action="validate.php" method="post" data-abide>
<fieldset>
<legend>Todos os campos são necessários</legend>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="right inline">Dogecoin Adress</label>
</div>
<div class="small-9 columns">
<input name="wallet" type="text" pattern="wallet" class="small-12 columns" required />
<small class="error">Invalid Adress</small>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.abide.js"></script>
<script type="text/javascript">
jQuery.extend(window.Foundation.libs.abide.settings.patterns, {
wallet: /^D{1}[5-9A-HJ-NP-U]{1}[1-9A-HJ-NP-Za-km-z]{32}$/
});
</script>
</body>

jQuery datepicker not working on MVC4 application

I am trying to introuduce jQuery datepicker to my MVC4 application but I cannot seem to get the click event to fire the datepicker widget. At http://jqueryui.com/datepicker/ they give a simple example of how to implement this and when I try locally it works as expected but on MVC4 application nothing:
My code is as follows:
<script src="#Url.Content("~/Scripts/jquery-2.0.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#expirydate').datepicker();
});
</script>
<div class="nine columns bottom20">
<div class="row">
<h3>New Course details</h3>
#using(Html.BeginForm("NewCourse","Admin",FormMethod.Post))
{
<div class="row">
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
</div>
<div class="six columns">
<label for="author">Author:</label>
<input type="text" id="author" name="author" /><br />
</div>
<div class="row">
<div class="twelve columns" style="width:590px; margin-left:5px;">
<label for="description">Description:</label>
<input type="text" id="description" name="description" /><br />
</div>
</div>
<div class="twelve columns" style="width:590px;">
<div class="row">
<div class="six columns">
<label for="participationpoints">Participation Points:</label>
<input type="text" id="participationpoints" name="participationpoints" /><br />
</div>
<div class="six columns">
<label for="expirydate">Expiry Date:</label>
<input type="text" id="expirydate" name="expirydate" /><br />
</div>
</div>
</div>
<div class="row">
<div class="six columns">
<input type="hidden" id="uploaddate" name="uploaddate" /><br />
</div>
</div>
</div>
</div>
</div>
<div class="twelve columns">
<input id="CourseSubmit" type="submit" value="Submit button" class="medium button bottom20"style="margin-left:210px; margin-top:-50px;" />
</div>
}
</div>
</div>
Any ideas what is going on here?
Other scripts in the layout are as follows:
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript" src= "#Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src= "#Url.Content("~/Scripts/meta-app.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/filedrag.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.sortable.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.filter.js.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/footable.paginate.js")"></script>
And my bundle config is as follows:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery.js",
"~/Scripts/foundation.min.js",
"~/Scripts/modernizr.foundation.min.js",
"~/Scripts/jquery{version}.js",
"~/Scripts/jquery.carouFredSel-6.0.3-packed.js",
"~/Scripts/jquery.touchSwipe.min.js",
"~/plugins/slider-revolution/jquery.thempunch.plugins.min.js",
"~/plugins/slider-revolution/jquery.thempunch.revolution.min.js",
"~/plugins/flexislider/jquery.flexslider.js",
"~/plugins/camera/scripts/camera.min.js",
"~/plugins/camera/scripts/jquery.easing.1.3.js",
"~/plugins/camera/scripts/jquery.mobile.customized.min.js",
"~/plugins/titan/js/jquery.titanlighbox.js",
"~/plugins/titan/js/prettify.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/footable.js",
"~/Scripts/footable.sortable.js",
"~/Scripts/footable.filter.js",
"~/Scripts/footable.paginate.js",
"~/Scripts/jquery-2.0.2.js",
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery.validate.unobtrusive.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.10.3.js",
"~/Scripts/jquery-ui-{version}.js"));

You are rending jQuery twice, once in your layout and again on your view. This could be causing the issue you are seeing.

the correct code:
$('#datepicker').datepicker();
check your css file jquery-ui.
Selector in jquery
#= ID
. = class
by some attribute
$('a[href=www.google.com]')