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.
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 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 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>
I am new to bootstrap and trying to use linked datepicker where
Only Date should be displayed (not time).
Default Selected Date shown in Datepicker as well as in textbox should be today's date on page load (before selecting any date from datepicker default date appeared in text box should be today's date).
Future dates should be disabled in startdate and enddate.
I am using following code :
Html Code
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Script
jQuery(function () {
jQuery('#startDate').datepicker({
//format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
jQuery('#endDate').datepicker({
//format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true,
useCurrent: false
});
jQuery('#startDate').datetimepicker().datepicker("setDate",new Date());
jQuery('#endDate').datetimepicker().datepicker("setDate",new Date());
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
Using jQuery('#startDate').datepicker().datepicker("setDate",new Date());
I can achieve point no. 2.
However, issue is future date disabled works for datepicker and startdate enddate selection works with datetimepicker. (Using datepicker and datetimepicker shows two datepikcer controls one on textbox other on addon)
How to combine this to achieve all the three point using only datepicker
I think that you are mixing two different libraries eonasdan datetimepicker and bootstrap datepicker.
If you want to use the first library, then you have to:
specify format option according momentjs docs
use minDate and maxDate properties and methods
listen for dp.change event
use useCurrent option
Here a working example:
jQuery('#startDate').datetimepicker({
format: 'MM-DD-YYYY',
maxDate: moment().endOf('day'),
defaultDate: moment()
}).on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").minDate(e.date);
});
jQuery('#endDate').datetimepicker({
format: 'MM-DD-YYYY',
maxDate: moment().endOf('day'),
defaultDate: moment()
}).on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").maxDate(e.date);
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
If you want to use the bootstrap datepicker, then you have to:
specify format option lowercase
use endDate option and setStartDate and setEndDate functions
listen for changeDate event
use update method to set default date
Here a working example:
jQuery('#startDate').datepicker({
format: 'mm-dd-yyyy',
endDate: '0d',
autoclose: true
}).on("changeDate",function (e) {
jQuery('#endDate').datepicker("setStartDate", e.date);
});
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);
jQuery('#endDate').datepicker({
format: 'mm-dd-yyyy',
endDate: '0d',
autoclose: true
}).on("changeDate",function (e) {
jQuery('#startDate').datepicker("setEndDate", e.date);
});
$('#endDate').datepicker('update', now);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Note that, according the docs, update accepts a Date object but $('#startDate').datepicker('update', new Date()); did not work for me (and I don't know why), while the following lines set a default date correctly:
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);
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
}); });