I have this error in console : $(…).datepicker is not a function - javascript

I am new to html with js .I try to use a datepicker, but it doesn't work.
I have this error : $(...).datepicker is not a function in console
I use many frameworks and librairy (bootstrap, datapicker). And I think that there is a conflicts between they.please advice me in code.
js page :
$(document).ready(function() {
// dateevent
$(".datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
// time of event
$('.datefrom').datetimepicker({
format: 'LT'
});
$('.dateto').datetimepicker({
format: 'LT'
});
//geteventbyid
if (sessionStorage.getItem('editeventid')!=0) {
geteventbyid();
}
});
//time
</script>
Libraries I'm using and their placing:
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
html page :
<!-- Start Main -->
<section id="main">
<div id="page">
<div class="row-container light bg-scroll" style="">
<div class="row">
<form method="post">
<div class="col-sm-4"></div>
<div class="form-group">
<div class='col-sm-4'>
<label>Select Date: </label>
<input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
</div>
</div>
</form>
<div class="col-sm-4"></div>
</div>
</div>

Better add jquery.js plugin in top of script. Because bootstrap also need jquery support
$(document).ready(function() {
// dateevent
$(".datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
// time of event
$('.datefrom').datetimepicker({
format: 'LT'
});
$('.dateto').datetimepicker({
format: 'LT'
});
//geteventbyid
// if (sessionStorage.getItem('editeventid') != 0) {
// geteventbyid();
//}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> html page :
<!-- Start Main -->
<section id="main">
<div id="page">
<div class="row-container light bg-scroll" style="">
<div class="row">
<form method="post">
<div class="col-sm-4"></div>
<div class="form-group">
<div class='col-sm-4'>
<label>Select Date: </label>
<input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
</div>
</div>
</form>
<div class="col-sm-4"></div>
</div>
</div>

Related

function jquery datetimepicker is not found/work

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="Js/bootstrap-datetimepicker.min.js"></script>
<script src="Js/bootstrap-datetimepicker.he.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
why this is not working:
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
datetimepicker is not a function jquery
What is the right arrangement that will work?
You can get the bootstrap datetimepicker from here.
$(function () {
$('#dtpickerdemo').datetimepicker();
});
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
/>
<link
href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="//code.jquery.com/jquery-2.1.1.min.js"
></script>
<script
type="text/javascript"
src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"
></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="form-group">
<label for="dtpickerdemo" class="col-sm-2 control-label"
>Select date/time:</label
>
<div class="col-sm-4 input-group date">
<input type="text" class="form-control" id="dtpickerdemo" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Bootstrap datepick

why the following code works correctly at https://angrytools.com/bootstrap/editor/ and doesn't work in Visual Studio Code.
It's about datepick operation
please help
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
$('.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap datepicker</h1>
<div class="input-group date">
<input type="text" class="form-control date"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>
I think you are linking scripts and CSS in the wrong order that's why it is not working. See below working example.
You have to link 2 CSS files and 3 JS files. This is where you gone wrong.
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
label{margin-left: 20px;}
#datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<label>Select Date: </label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
you have check datepicker CDN, this cdn is worked well
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
$('.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap datepicker</h1>
<div class="input-group date">
<input type="text" class="form-control date"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>

Seconds is not showing in bootstrap datetimepicker

I've read some opened issue about this, but it didn't help me. I have also read the moment.js documentation but I don't know why it still not working. I just want to add the seconds to show when picking a datetime. Please see my code below:
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Try passing useSeconds: true as shown below. That should help.
The datetimepicker FAQ says that it uses the format option to decide what components to show. But then I found useMinutes and useSeconds options here: http://eonasdan.github.io/bootstrap-datetimepicker/Changelog/#2120.
(I know its not a very good place to document a feature, but .... let it be ;) )
$(function(){
$('#dateTimePicker').datetimepicker({
format: "DD/MM/YYYY hh:mm:ss A",
useSeconds: true
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
<input type="text" id="dateTimePicker" class="form-control">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
Please try this snippet,
Setting the format to the correct value from moment and sideBySide:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A',
sideBySide: true,
tooltips: {
pickSecond: 'Pick Second'
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.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/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<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>
For more info please visit this - How to add seconds to Bootstrap date time picker
Bootstrap3 DateTime picker - https://eonasdan.github.io/bootstrap-datetimepicker/Options/#viewdate
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({format: "DD/MM/YYYY hh:mm:ss A"});
});
</script>
</div>
</div>

Bootstrap datepicker not appearing when clicked

I am trying to add a datepicker to one of my form fields, but it simply won't appear. When I hover over the icon, the hand button comes up as if it is clickable, but when I click it, nothing happens. Here is my code:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
#using (Html.BeginForm("Index", "Engagement", FormMethod.Get, new { #class = "form-inline" }))
{
<div class="form-group">
<label for="end">Start date:</label><br />
<div class='input-group date' id='StartDateFilter'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#StartDateFilter').datetimepicker({
locale: 'en-GB'
});
});
</script>
}
jurfer i think ,the script order was incorrect. Here is the code which works
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='dt1'>
<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">
$('#dt1').datetimepicker({
locale: 'en-GB'
});
</script>
</div>
</div>

Why data-role is not working in Jquery Mobile?

Hi I have the HTML page where I have input field for date picker but that date picker is not working.Below is my code.
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../CSS/Final_Pages/CSS/tableStyle.css" rel="stylesheet" />
<link href="../CSS/tableStyleResponsive.css" rel="stylesheet" />
<link href="../CSS/Custom_style.css" rel="stylesheet" />
<link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div data-role="page">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:11)">
<div role="main" class="ui-content">
<!-- Other Information Field Starts-->
<div data-role="fieldcontain">
<label id="doblbl">Date Of Birth:</label>
<input type="text" id="dob" name="dob" value="" data-role="date" />
</div>
</div>
</form>
</div>
</body>
</html>
Try take a look at this:
Not sure if its is what your looking for
<div id="indexPage" data-role="page">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src=" http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />

Categories

Resources