glyphicon-calendar Start and End Date - javascript

I have this piece of aspx code:
<div class="col-xs-2">
<label for="txtDateActioned" style="cursor: pointer;">Date Actioned</label>
<div id="sandbox-container">
<div class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
From my understanding (and I'm not a web developer, just struggling with maintenance) this is a bootstrap datetime picker.
My humble wish is to set the 'end date' (or 'max date') to 'Today', or any other date. I tried doing this using JS (in the $(document).ready(function()...) section):
$('#txtDateActioned').daterangepicker(
{
maxDate: "01-09-2016"
}
);
However, I can't find a way to make it work. The user can still select a future date, which is exactly what I want to prevent. I also tried different date format such as '2016-09-01', and also tried '$('#txtDateActioned').datetimepicker()'. However, nothing worked for me.
Any help is most appreciated.
Elad

You can try endDate instead of maxDate
like:- endDate:'+0d'

the example could be
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
startDate: '-30y',
endDate:'+0d',
});
here the y in startDate: '-30y' is indicating the start year of the calender and d in endDate:'+0d' is indicating the last date of the calender which is the current date.
you can try this.good luck :)

My solution:
1) I added an id for the div contains the 'input-group date' class.
<div id="dateActionedDP" class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
2) In js code (the $(document).ready(function ()...) I added the following:
$("#dateActionedDP").datepicker("setEndDate", '+0d');
This worked for me. Thanks everybody for helping.
Elad

Related

Datepicker for Bootstrap 4

What I could use for date instead of 'datepicker' because it don't work correct and I heard it's not compatible from bootstrap 3+.
If I paste example datepicker code to clear html page it works correct but if I paste it to my page inputs do themself smaller(height). I checked where the problem is and probably problem is by bootstrap-combined.min.css If I delete it everything back to standard size(without datepicker input) but datepicker doesn't works. I tried to update version(in examples is 2.2.2) of bootstrap-combined-min.css but probably it's not exist.
If exist any alternative way, write about it.
Please for answer like for beginner because I don't understand enough scripts and adding it to page.
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy',
language: 'pt-BR'
});

Controlling the datepicker calendar margin off of the date field with JQuery

I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.
EDIT
I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.
This image shows the output
The Bootstrap DatePicker Documentation can be found here
And the code I have in looks like this:
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
Very simple.
Here is an image of the inspector and you can see the postion top value added by the JS.
Any idea on how to bring that sucka down?
Here is a CODEPEN with my problem
You are initializing datepicker over <div class="input-group date" id="datepicker" element not over input element.
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
<!-- _______________^^ Remove class `date` from here -->
<input type="text" class="form-control date">
<!-- ____________________^^ Add class `date`here -->
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
Fiddle here

Cannot get jQuery call right for eternicode Bootstrap datepicker

I have been trying out the eternicode/bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker). I tried out the sandbox (http://eternicode.github.io/bootstrap-datepicker/) and just wanted to use the "Component" version with "Today" highlighted.
I have two problems which I think are the same thing: 1) the date doesn't show up when you click on the glyphicon only when you click in the input space and 2) I cannot get the "Today" highight working.
I am 99% sure it is the jQuery call that is wrong. I have tried all sorts to get it to fire as per Sandbox etc but my JS/jQuery is just not up to the job.
(The timepicker (https://github.com/jdewit/bootstrap-timepicker) works fine without a jQuery launch script for now).
Part of the problem is that when I download a zip from GitHub there are two .less files both of which (I think) are Bootstrap2.
Any help gratefully recieved.
<div class="form-group col-sm-3 colFlushL">
<label class="control-label" for="zaq-timeSimple">Time</label>
<div class="input-group bootstrap-timepicker timepicker colFlush ">
<input id="timepicker1" type="text" name="arse"
class="form-control">
<span class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
</div>
<div class="form-group col-sm-3 colFlush" id="zaq-startDate">
<label class="control-label" for="zaq-startDate">Start Date</label>
<div class="input-group colFlush">
<input type="text" class="form-control date" name="datepicker"
data-provide="datepicker">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
Here is the latest version of my jQuery attempt which is I am 95% sure horrendous.
<script>
$('.datepicker.date').datepicker.(
{
todayHighlight: true
}
)
</script>
NB According to phpStorm date is NOT a class defined anywhere which I presume includes the .less file
PS I should have said the two date pickers on the page ARE 100% passing the value of the dates through with the form.
OK this was a typo (or more accurately newb lack of jQuery understanding!!)
$('.datepicker.date').datepicker.(
should have been
$('.datepicker.date').datepicker(
IE I stuck in an extra period. (And that cost me at least two hours! D'oh!)

getbootstrap 3.0 datetimepicker calendar and time issues

I am new to datetimepicker component. I am using datetimepicker with getbootstrap3 css and js files. I am able to see the datetimepicker on the page, but when I click to select date then select time, I can not click back on date again. please see the screen shot
My code is as shown below :
<div class='input-group date col-sm-7' id='startDate'>
<input type='text' class="form-control" id="start_Date" name="start_Date" />
<label for="end_Date" class="input-group-addon btn">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
The javascript is :
$(document).ready(function () {
$('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
}
Datetimepicker is also not working in smart devices. The issue can be seen on windows and smart devices. I see the above issue on all smart devices as well. On smart devices, once I select the date and time, the datetimepicker never closed, I need to click on some other component on the page to close the datetimepicker.
I would appreciate some one could provide a complete working sample code.
Thanks.

Bootstrap datepicker pop-up not shown the highlighted current date

I am using Bootstrap datepicker by using Bootstrap-datepicker API. When I click the button the calendar/datepicker pop-up shown but it didn't mark the current date as Blue font as shown in API examples.
I am using the below code:
<body>
<div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="form-control" size="56" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#datepicker').datepicker();
</script>
</body>
The calendar/datepicker pop-up shown but the current date is not highlighted as blue as shown in API Examples and also the mouse cursor is not pointer.
Please help me regarding this issue
If you are using this : https://github.com/eternicode/bootstrap-datepicker you have to give options when you initiate calendar, such as
$('#sandbox-container input').datepicker({
todayHighlight: true
});
$('#datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true
});
Here is the JSFiddle
Bootstrap Datepicker depends on its own CSS for styling the calendar widget.
For quickly importing the dependence, you can pick a version from cdnjs (make sure you pick a .css extension) and import into your HTML like this:
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
Just to add to the list of possible solutions as I was experiencing the same problem. The today class was not getting assigned to the current day using:
$('.datepicker').datepicker({
'format': 'mm/dd/yyyy',
'todayHighlight': true
});
The html in the example has a class of date only.
<div class="input-group date">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
In my case, I was missing the datepicker class. Added that to the element and now everything is working properly.
Needs to be:
<div class="input-group date datepicker">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Another option is to add this attribute to your datepicker input element:
today-highlight="true"
If you are using reactive form then you can also set today's date as a value in your formGroup initiation like this
myform = new FormGroup({
name: new FormControl('', [Validators.required]),
event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
})

Categories

Resources