flatpickr: external elements not working while pressing on icon - javascript

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>

Related

how to call a jquery function from html file in js file

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>

Bootstrap Datepicker Validations Not Working

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.

Bootstrap datetimepicker does not open

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>

Datepicker icon not aligned properly with textbox

I have two textbox with datepicker, currently I am using a button icon for selecting the date. My problem is the button is appearing directly below the textbox whereas I would like it to align directly to the right side of the textbox. I believe I would need to work on CSS to achieve the results.
$('#datepicker1').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
$('#datepicker2').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div class="form-group row">
<div style="float:left;" class="form-group col-xs-6">
<label>Date 1</label>
<input type="text" class="form-control" id="datepicker1"/>
</div>
<div style="float:left" class="form-group col-xs-6">
<label>Date 2</label>
<input type="text" class="form-control" id="datepicker2"/>
</div>
</div>
apply this css using position:absolute;
$('#datepicker1').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
$('#datepicker2').datepicker({
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
showOn:"button",
buttonText: "<span class='glyphicon glyphicon-calendar'></span>"
});
.form-group{
position:relative;}
.ui-datepicker-trigger{
right: 16px;
top: 26px;
position: absolute;}
.ui-datepicker-trigger span{
line-height:26px;}
.form-control{
padding-right:30px!important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div class="form-group row">
<div style="float:left;" class="form-group col-xs-6">
<label>Date 1</label>
<input type="text" class="form-control" id="datepicker1"/>
</div>
<div style="float:left" class="form-group col-xs-6">
<label>Date 2</label>
<input type="text" class="form-control" id="datepicker2"/>
</div>
</div>

Datepicker not showing - Bootstrap

So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing.
I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
I ran into a similar issue - in my case in the jQuery wiring $('#someid').datepicker() 'someid' was the id of the 'input' and where it should have been of the container div. which means - it worked when you click the input box but not the glyphicon button.
I have a working copy fiddle is here :
jsfiddle
The jsfiddle code is here : (Note: the reference to jQuery 2.0.2 and also the external reosurces tab in jsFiddle editor)
http://jsfiddle.net/Lro8kxjx/6/
<div class="col-xs-6 ">
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
}); });

Categories