I would like to add a datepicker to my webpage. However when i add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>, it is not working. It works if i add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> instead.
My working code is as below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
**<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>**
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
});
</script>
</head>
<body>
<div class="container">
<input class="form-control" type="text" placeholder="click to show datepicker" id="calendar">
</div>
</body>
</html>
not working one is as below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
});
</script>
</head>
<body>
<div class="container">
<input class="form-control" type="text" placeholder="click to show datepicker" id="calendar">
</div>
</body>
</html>
why updated version block datepicker?
Related
I want to display the datepicker in french and I included the cdn of the local
this is my code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js">
</script>
</head>
<body>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
and it gives me 2 errors
first error
second error
You need to declare the main datepicker too. Also I've added the missing datepicker class to the input and then the following snippet works.
$(function() {
$('.datepicker').datepicker({
language: 'fr'
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div class="input-group date" id="datepicker">
<!-- I've added the datepicker class, which you are using in your jQuery -->
<input type="text" class="form-control datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
you can try this library:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
</head>
<body>
<div class="gj-clear-both"></div>
<div class="gj-margin-top-10">
<input id="datepicker" width="276" />
</div>
<script type="text/javascript">
var datepicker, config;
config = {
locale: 'de-de',
uiLibrary: 'bootstrap4'
};
$(document).ready(function () {
datepicker = $('#datepicker').datepicker(config);
config.locale = 'fr-fr';
datepicker.destroy();
datepicker = $('#datepicker').datepicker(config);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/messages/messages.fr-fr.js" type="text/javascript"></script>
</head>
<body>
<div class="gj-margin-top-10">
<input id="datepicker" width="276" />
</div>
</body>
</html>
<!-- end snippet -->
I want functionality like the user can choose the date range. When clicking on first text box then the date picker should be open and the user can select the start date and the same for the second textbox for end date.
Below code, I have tried but it is not working, I console it and it will throw this Uncaught TypeError: $(...).datepicker is not a function", error...
Please help me to solve it.
Any help would be appreciated.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
<script type="text/javascript">
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
</body>
</html>
you're missing a few a scripts and link tags of bootstrap datepicker
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Jquery -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<!-- Popper JS -->
<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>
<!-- BootStrap 4 JS -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- BootStrap 4 CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- BootStrap DatePicker JS -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
></script>
<!-- BootStrap DatePicker CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05" />
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19" />
</div>
<script type="text/javascript">
$(".input-daterange input").each(function() {
$(this).datepicker("clearDates");
});
</script>
</body>
</html>
I'm trying to use Tempus Dominus but it not working. What i'm doing wrong ?
$(function (){
$('#date').datetimepicker();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<input type="text" id="date">
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datetimepicker1").datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
This is the CSHTML code. When placing the same code with scripts in a normal HTML
document it opens/functions, however when using the CSHTML in ASP.NET MVC
C# gives errors in the browser indicating $() not a function. (Bootstrap datepicker '#birthdate' won't fuction)...
Any suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/Scripts/bootstrap.css" rel="stylesheet" />
<!--<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />-->
<link href="~/Scripts/daterangepicker.css" rel="stylesheet" />
<!-- jQuery -->
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/daterangepicker.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<!---<script src="~/Scripts/bootstrap.min.js"></script>-->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<link href="~/Scripts/bootstrap-datepicker3.standalone.css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function () {
$("#birthdate").datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true,
clearBtn: true,
orientation: 'bottom'
});
});
</script>
</head>
<body>
<div class="form-group">
<label for="usr">Birthdate:</label>
<div class='input-group date' id='birthdate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
Hi here are the steps to fix this issue.
step.1:
lets say this is you _layout.cshtml, arrange scripts like bellow:
[_layout.cshtml]
<!DOCTYPE html>
<html>
<head>
<link href="~/Scripts/bootstrap.css" rel="stylesheet" />
<!--<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />-->
<link href="~/Scripts/daterangepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/daterangepicker.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<link href="~/Scripts/bootstrap-datepicker3.standalone.css" rel="stylesheet"/>
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
and now here is the view on which you are using the datetime picker.
theView.cshtml
<div>
<div class="form-group">
<label for="usr">Birthdate:</label>
<div class='input-group date' id='birthdate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$("#birthdate").datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true,
clearBtn: true,
orientation: 'bottom'
});
});
</script>
}
hope this will work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ya Rab</title>
<!--styles and scripts-->
<link rel="stylesheet" href="themes/Zahran-Flat-Theme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" href="mystyles.css" />
<!--styles and scripts-->
</head>
<body>
<!--page-->
<div id="blogpost" data-role="page" data-theme="a">
<!--Header--><div data-role="header" data-theme="a" data-position="fixed">
<h1>ZahranPress</h1>
</div><!--Header-->
<div data-role="content" id="mypost">
</div><!--Content-->
<script src="http://testzahran.marocwebs.com/?json=recentstories&callback=ListPosts"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ya Rab</title>
<!--styles and scripts-->
<link rel="stylesheet" href="themes/Zahran-Flat-Theme.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="myscript.js"></script>
<link rel="stylesheet" href="mystyles.css" />
<!--styles and scripts-->
</head>
<body>
<!--page-->
<div id="blogpost" data-role="page" data-theme="a">
<!--Header--><div data-role="header" data-theme="a" data-position="fixed">
<h1>ZahranPress</h1>
</div><!--Header-->
<div data-role="content" id="mypost">
</div><!--Content-->
<script src="http://testzahran.marocwebs.com/?json=recentstories&callback=ListPosts"></script>
</body>
</html>
Hi
I was trying to develop wordpress app using jquery and json for this site ZahranPress and it didn't work and I checked it many times. I coded it according to this cool tutorial Jquery mobile app Here's the html code and javascript. hope anybody help.