I am using two calendars on the page, start and end dates, using Bootstrap date time picker. Oddly, it works fine when run locally from within Visual Studio 2017; but when deployed clicking text box or icon has no effect.
I checked for similar problem online and tried all suggestion: using class name instead of div id, checking order of js/css includes, ... but nothing helped.
I checked developer console for errors and see: "EventLog.aspx:353 Uncaught TypeError: $(...).datepicker is not a function" at the following line:
$('#divStartDate').datepicker({
I read that this could be caused if there are multiple references to jquery and I can't see it, unless one of the other plugins I am using is using it as well.
This is .Net application and in master file I have:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
In the aspx page using calendars:
<div class="col-sm-2">
<div>
<label for="tbStartDate">Start Date</label>
<div id="divStartDate" class="input-group date startdate">
<input runat="server" clientidmode="static" type="text" id="tbStartDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col-sm-2">
<div>
<label for="tbEndDate">End Date</label>
<div id="divEndDate" class="input-group date enddate">
<input runat="server" clientidmode="static" type="text" id="tbEndDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
....
<script>
$(document).ready(function ()
// I tried replacing #divStartDate with .input-group.date.startdate
$('#divStartDate').datepicker({
format: 'mm/dd/yyyy',
useCurrent: true,
autoClose: true,
allowInputToggle: true,
endDate: '+0d',
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
}).on('changeDate', function (e) {
$('#hfStartDate').val(e.format());
$(this).datepicker('hide');
});
$('#divEndDate').datepicker({
format: 'mm/dd/yyyy',
useCurrent: false,
autoClose: true,
allowInputToggle: true,
endDate: '+0d',
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
}).on('changeDate', function (e) {
$('#hfEndDate').val(e.format());
$(this).datepicker('hide');
});
});
</script>
You have some errors in your code which you should avoid:
include any library only once, you have added bootstrap-datetimepicker.min.js 2 times.
You have included datetimepicker library then you should initialize it as per documentation for e.g. $('#divStartDate').datetimepicker(); not as datepicker().
Use maxDate, endDate is not a valid option for datetimepicker.
see format option, you have to give capital values because it refers to moment.js format option see here for options.
and now the solution is as below:
$(document).ready(function () {
$('#divStartDate').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: true,
keepOpen: true,
allowInputToggle: true,
maxDate: new Date(),
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
});
$('#divEndDate').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false,
keepOpen: true,
allowInputToggle: true,
maxDate: new Date(),
ignoreReadonly: true,
showTodayButton: true,
viewMode: 'days'
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="col-sm-2">
<div>
<label for="tbStartDate">Start Date</label>
<div id="divStartDate" class="input-group date startdate">
<input runat="server" clientidmode="static" type="text" data-date-end-date="0d" id="tbStartDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col-sm-2">
<div>
<label for="tbEndDate">End Date</label>
<div id="divEndDate" class="input-group date enddate">
<input runat="server" clientidmode="static" type="text" data-date-end-date="0d" id="tbEndDate" class="form-control" style="cursor: pointer">
<span class="input-group-addon" style="cursor: pointer">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
Related
I want to use external elements option (wrap). I imagine that if I use this option I'll be able
to open a datepicker by simply pressing on calendar icon but that is not a case. How to make so, that this datepicker would open upon clicking on datepicker icon and on input field?
Update no.1
after trial and error session I realized that I was missing wrapping div with a class flatpickr. The case can be closed. (see update for a solution [second datepicker])
Update no.3
it is still not fixed. Now it opens a drop menu, however on select field is empty
Update no.4
on the third update now it seems to be working. Finally. Needed to add data
attributes (data-toggle and div class flatpickr)
flatpickr($(".input-group.date"), {
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
//working after adding div with flatpickr class
//opens mnu on pressing icon
$(".flatpickr").flatpickr($(".input-group.date"), {
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
//working after adding div with flatpickr class
//opens mnu on pressing icon
$(".input-group.date3").flatpickr({
enableTime: false,
time_24hr: true,
altInput: true,
allowInput: true,
dateFormat: "Y-m-d",
altFormat: "Y-m-d",
wrap: true,
minDate: "2020-01",
maxDate: "2022-01"
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css" rel="stylesheet" />
</head>
<body>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">
from
</label>
<div class="input-group date">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="
">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
<!--second atempt-->
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">
from (working correctly)
</label>
<div class="flatpickr">
<div class="input-group date">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="
">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<!--third attempt-->
<div class="col-sm-12">
<div class="form-group">
<label class="control-label">
from (third time is a charm)
</label>
<div class="flatpickr">
<div class="input-group date3">
<input type="text" class="form-control" autocomplete="off" data-input/>
<span class="random-class" data-toggle>
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
</body>
</html>
I want to get the date format in the form of 30-sep-2019 instead of 30-09-2019
JS
$(document).ready(function () {
$('.form-control.fromdate').datepicker({ format: "mm-dd-yyyy", changeMonth: true, changeYear: true });
}
HTML
<div class="input-group fromdate" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control fromdate" placeholder="mm-dd-yyyy" id="FromDate" runat="server" data-date-container="#formDiv" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
Please refer the documentation, try using:
format: 'dd-M-yyyy'
$('#table').datepicker({
format: 'dd-M-yyyy'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class='input-group date datepicker' id='table'>
<input type='text' name="tgl" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Change your code to $('.form-control.fromdate').datepicker({ dateFormat: 'dd-MMM-yy' }).val();
I don't know how to call my jQuery function from my HTML file.
This function was in the HTML file at the beginning. I moved it in to a JS file and would like to call it from this as the code looks cleaner when I have different files for the different languages.
$(function() {
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
$(function() {
$('#datepicker2').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<div onclick="datumEins()" class="container">
<div class="row">
<h2>Startdatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker'>
> i think the calling must be putted in the input tag
<input type='text' id="datum1" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<!--ENDDATUM-->
<div onclick="datumZwei" class="container">
<div class="row">
<h2>Enddatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker2'>
> i think the calling must be putted in the input tag
<input type='text' id="datum2" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
I want to validate the datepicker input control to disable all past dates, i.e all dates from the current date only should be enabled.
I tried using the bootstrap-datepicker library and used the js code below for the validation but I'm still a
$('.input-group.date').datepicker({
autoclose: true,
daysOfWeekDisabled: [0, 6],
todayHighlight: true,
format: "dd-mm-yyyy",
startDate: new Date()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<form action="#" method="POST">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</form>
I'm still able to select all past dates.
$('.input-group.date').datepicker({
autoclose: true,
daysOfWeekDisabled: [0, 6],
todayHighlight: true,
format: "dd-mm-yyyy",
startDate: '0d';
});
<form action="#" method="POST">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</form>
<script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}">
I want all past dates to be disabled.
I was able to figure out the problem after checking my console to see the error being displayed each I load the page.
Re-arranging my js libraries solved it.
i'm using angular 4, i want to use bootstrap-datepicker sandbox,
heres the code :
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker3.standalone.min.css">
<!-- Bootstrap -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- Main jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="./assets/libs/datepicker/js/bootstrap-datepicker.min.js"> </script>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
component.ts :
$('#sandbox-container .input-group.date').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});
but when i click this the input text field, the datepicker doesnt appears.
$('#sandbox-container .input-group.date').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css">
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Main jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js">
</script>
<div id="sandbox-container">
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
The problem is the selector #sandbox-container, you have to put the calendar input into it or remove that selector.
Hope it helps!
Hope this will help you https://jsfiddle.net/m6Ls4w4w/
$('.date').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
You are giving wrong selector.