how to deactivate past dates in jquery

how to deactivate past dates in jquery - javascript

i am using jquery calendar and i want to deactivate all the past dates.
user can only enter the current date or date that is greater than current date.
i am using this code
<!-- calendar code starts-->
<link rel="stylesheet" type="text/css" href="calendar2/tcal.css" />
<script type="text/javascript" src="calendar2/tcal.js"></script>
<script type="text/javascript">
$("#dt").datepicker({ minDate: new Date() });
</script>
<!-- calendar code ends-->
html code
<div><input type="text" id="dt" name="requireddate"
class="tcal" value="<?php echo $rec5['requireddate']; ?>" /> </div>
but the above code is not working..it shows all past dates
i am using this calendar http://www.softcomplex.com/products/tigra_calendar/

update
Just noticed that you do not use the jquery UI.. my answer is based on that..
Answer (based on jQuery UI datepicker)
In your example the previous dates are de-activated..
They are shown, but not selectable..
do you want them to not be visible ?
To do that you can use the beforeShowDay event, to apply a class to the old days and hide them with css
Script
var today = new Date();
$("#dt").datepicker({
minDate: today,
beforeShowDay: function(cdate){
var old = cdate < today;
return [true, old?'old':''];
}
});
and CSS
td.old span{
visibility:hidden;
}
demo at http://jsfiddle.net/gaby/s2ZmQ/1/

Related

can't get startDate or endDate to work in my bootstrap datetimepicker?

I have a datetimepicker in my project and have looked around and what seems like it should be a very simple solution just seems to not work. I need to make it so you are only able to select the previous 7 days. My code is
<div class='input-group date' id='startDateTimeDiv'>
<input id="startDateTimeSelection" type='text' class="form-control" name="startDateTimeSelection" style="width: 250px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- bootstrap date time pickers -->
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
startDate: '-7d'
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
});
I've tried using minDate too. I also tried endDate and maxDate and get the same issue. When i try and click the icon to change the date it just doesn't open and nothing happens. Any help appreciated thank you, also, any other ways of being able to select only the previous 7 days would be welcomed.

You're missing a comma after the '-7d', so your script is failing.
Also use minDate with moment() to limit to previous 7 days.
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate: moment().subtract(7,'d').format('YYYY-MM-DD'),
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
});

jQuery/bootstrap show datepicker when button is clicked and assign value to variable without input text

Quite new to jQuery so please bear with me...
I would like to show the datepicker when I click a button. The datepicker should appear as a popup and assign the selected date to a variable.
My attempt so far
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button><input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
and in the main.js
function snapshot_btn() {
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
}
but the datepicker does not show when I click the button.
It shows normally on other input boxes.

EDIT
Since in your original question you didn't say that it was bootstrap datepicker, not jQuery datepicker, I made this answer using jQuery datepicker.
You need to add the two libraries (jquery and then jquery UI, check the snippet to get the links), after that,
just use the code below and in the onSelect function, get the date as parameter, it already contains the selection.
I made a slight change, removing the input type='hidden', and adding an empty div, that way the calendar will appear inline.
My example also makes the calendar disappear and reappear on click, take a look.
function snapshot_btn() {
var btnOpenCalendar = $("#btnOpenCalendar");
if (btnOpenCalendar.hasClass('calendar-open')){
btnOpenCalendar.removeClass("calendar-open");
$("#button_snapshot").datepicker("destroy");
}else{
btnOpenCalendar.addClass("calendar-open");
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function (date) {
alert(date);
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button type="button" id='btnOpenCalendar' class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button>
<div id="button_snapshot"></div>

With bootstrap-datepicker, add autoHide:true inside datepicker() and .datepicker("show"); right after. When use click the button, the modal will show up, and hide when you click outside
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>Snapshot </button>
<input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
JS
function snapshot_btn() {
$("#button_snapshot").datepicker({
autoHide:true,
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
$("#button_snapshot").datepicker("show");
}

Insert label inside bootstrap datetimepicker

Is there a way to add hour/minute label to eonasdan's bootstrap datetimepicker like shown in the screenshot?

As ceejayoz stated in comments, the datetimepicker does not include this kind of functionality. The library is open source and you can customize the code and the look & feel as suggested.
Another appoach is to add dinamically a row under hours and minutes row when the picker is shown. You can add a listner to dp.show event and then use jQuery to manipulate picker HTML.
Here a working sample:
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker1').on('dp.show', function(){
// Check timepicker is visible
if( $('.timepicker').is(':visible') ){
// Get rows of the timepicker
var rows = $('.timepicker>.timepicker-picker>table>tbody>tr');
// Create html for custom text
var tr = '<tr class="customText"><td>hours</td><td class="separator"></td><td>minutes</td></tr>';
// Add custom HTML inside component
$(rows[1]).after(tr);
}
});
.bootstrap-datetimepicker-widget table tr.customText td {
height: 24px;
line-height: 24px;
}
<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.47/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.18.1/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.47/js/bootstrap-datetimepicker.min.js"></script>
<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>
The datetimepicker has the debug option that, if set to true:
Will cause the date picker to stay open after a blur event.

Jquery datepicker won't allow to change date on a disabled textbox.

I'm using a datepicker inside my directive to allow user to pick the date. I have disabled the textbox so as to force the user to only change the date using the datepicker widget. The directive is given below:
function InformationDirective(){
return {
restrict: 'A',
link: function (scope, element, attrs, ngModelCtrl) {
var date = document.getElementById('reqDate');
$(date).datepicker($.extend({
dateFormat: 'm/d/y'
}
));
$("#calTrigger-btn").click(function(){
$(date).datepicker("show");
});
}
};
}
The HTML is as below:
<div information-directive>
<input id="reqDate"
ng-model="date"
type="text"
value="{{reqDate}}"
disabled/>
<div type="button" id="calTrigger-btn">
<img id="calendar-img" src="css\images\calendar.gif"></img>
</div>
</div>
For some reason my datepicker will only allow me to pick the date once, after the that the button won't launch the widget again. the $("#calTrigger-btn").click(function() is being called every time I click the button but the widget won't be called after the first selection. The directive and everything are being added to the html, the only problem is that I can't use the datepicker after picking the date once. I am using Jquery-ui-1.8.15 and will not be able to change it to a new one. I wanted to know whether there is any way I can resolve this problem. Any help provided is appreciated. Thank you.

It looks like you're using angular js (which I know nothing about) but if you can set it up as below instead, it works as expected.
$('#reqDate').datepicker($.extend({
dateFormat: 'm/d/y'
}
));
$("#calTrigger-btn").click(function(){
$('#reqDate').datepicker("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div information-directive>
<input id="reqDate"
ng-model="date"
type="text"
value=""
disabled/>
<div type="button" id="calTrigger-btn">
<img id="calendar-img" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png" width=25 height=25></img>
</div>
</div>

How to set default "Select" option in three date dropdowns(for year, month and day) in following scenario?

I'm using three individual dropdowns(three HTML select controls) on my website for the purpose of taking user's date of birth. For this thing to work I've used one jquery library titled jquery.dateLists.min.js. I'm using jquery-1.9.1.min.js and jquery-ui-1.10.0.custom.min.js.
Now what's my issue is when the page loads the date dropdown has the current date value selected,the moth dropdowm has the current month selected and the year dropdown has the first year among the years contained(currently it's 1914) in it selected. I want to set the item "Select" with value "" as default selected value. How should I achieve this? For your reference I'm putting below the library code as well as the HTML implementation of it.
jquery.dateLists.min.js
/*
* jQuery dateDropDowns
*
* url http://www.amdonnelly.co.uk/jquery/date-drop-down-lists
* author Alan Donnelly 2011
* version 1.0.1
* license MIT and GPL licenses
*/
(function(a){a.fn.dateDropDowns=function(k){var g={dateFormat:"dd-mm-yy",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],yearStart:"1914",yearEnd:"2000"},k=a.extend(g,k);return this.each(function(){function l(){var c=d.getMonth()+1,p="",f=1;_daysInMonth=m(c,d.getFullYear())+1;a("#"+e+"_list").children().length<_daysInMonth?f=a("#"+e+"_list").children().length+1:a("#"+e+"_list").children().remove();for(_x=f;_x<_daysInMonth;_x++)c=d.getDate()==_x?"selected='true'": "",p+="<option value='"+_x+"' "+c+">"+_x+"</option>";a("#"+e+"_list").append(p)}function m(c,a){var d=31;c==4||c==6||c==9||c==11?d=30:c==2&&(d=a%4==0?29:28);return d}function n(){var c=d.getDate(),a=d.getMonth()+1,f=d.getFullYear(),b=g.dateFormat;b.indexOf("DD")>-1&&c.toString().length<2&&(c="0"+c);b.indexOf("MM")>-1&&a.toString().length<2&&(a="0"+a);b=g.dateFormat.toLowerCase();b=b.replace("dd",c);b=b.replace("mm",a);b=b.replace("yy",f);j.val(b)}var j=a(this);j.html();var b=j.attr("id")+"_dateLists", e=b+"_day",h=b+"_month",i=b+"_year",k=j.val(),d=new Date,o=g.dateFormat.indexOf("/")>-1?"/":"-";(function(){if(k.length>0){var a=g.dateFormat.split(o),b=k.split(o),f=new Date;for(_x=0;_x<b.length;_x++)a[_x].toLowerCase().indexOf("d")>-1?f.setDate(b[_x]):a[_x].toLowerCase().indexOf("m")>-1?f.setMonth(b[_x]-1):a[_x].toLowerCase().indexOf("y")>-1&&f.setYear(b[_x]);d=f}})();(function(){var c=g.dateFormat.split(o),d=j;j.replaceWith("<div id='"+b+"' class='dateLists_container'></div>");for(_x=0;_x<c.length;_x++)c[_x].toLowerCase().indexOf("d")> -1?(a("#"+b).append("<div id='"+e+"' class='day_container'>"),a("#"+e).append("<select id='"+e+"_list' name='"+e+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("m")>-1?(a("#"+b).append("<div id='"+h+"' class='month_container'>"),a("#"+h).append("<select id='"+h+"_list' name='"+h+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("y")>-1&&(a("#"+b).append("<div id='"+i+"' class='year_container'>"),a("#"+i).append("<select id='"+ i+"_list' name='"+i+"_list' class='list'></select>"),a("#"+b).append("</div>"));a("#"+b).append(d);j.hide()})();l();(function(){a("#"+h+"_list").children().remove();for(_x=0;_x<12;_x++){var c=d.getMonth()==_x?"selected='true'":"";a("#"+h+"_list").append("<option value='"+_x+"' "+c+">"+g.monthNames[_x]+"</option>")}})();(function(){a("#"+i+"_list").children().remove();for(_x=parseInt(g.yearStart);_x<parseInt(g.yearEnd)+1;_x++){var c=d.getFullYear()==_x?"selected='true'":"";a("#"+i+"_list").append("<option value='"+ _x+"' "+c+">"+_x+"</option>")}})();(function(){a("#"+e+"_list").change(function(){d.setDate(a("#"+e+"_list").val());n()});a("#"+h+"_list").change(function(){var c=parseInt(a("#"+h+"_list").val()),b=d.getDate();_daysInMonth=m(c+1,d.getFullYear());b>_daysInMonth&&(b=_daysInMonth);d=new Date(d.getFullYear(),c,b,0,0,0,0);l();n()});a("#"+i+"_list").change(function(){var b=a("#"+i+"_list").val(),e=d.getDate(),f=d.getMonth();_daysInMonth=m(f+1,b);e>_daysInMonth&&(e=_daysInMonth);d=new Date(b,f,e,0,0,0,0); l();n()})})()})}})(jQuery);
The implementation is as follows(All the necessary above said jQuery libraries have been included.)
<script language="javascript">
/*The jQuery code to work the functionality*/
$().ready(function() {
$('#dob').dateDropDowns({dateFormat:'yy-mm-dd'});
});
</script>
<style type="text/css">
.dateLists_container {
}
.dateLists_container .list {
float:left;
}
.dateLists_container .day_container {
}
.dateLists_container .day_container .list {
margin-right:10px;
}
.dateLists_container .month_container {
}
.dateLists_container .month_container .list {
margin-right:10px;
margin-left:10px;
}
.dateLists_container .year_container{
}
.dateLists_container .year_container .list{
}
</style>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Date of Birth<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" type="text" name="dob" id="dob" value="">
</div>
</div>
If you want to check the functionality demo it is available at following URL :
http://www.amdonnelly.co.uk/jquery/date-drop-down-lists
Can some one please help me in this regard? Thanks in advance.

I think what you're looking for is something like:
$('#listid').prepend("<option>Select</option>");
$('#listid').prop("selected", true);
This will add a new option to the start of the list and select it, however it will break the plugin.
If you're still trying to use it, I fished out the old source code and uploaded it https://github.com/amdonnelly/jQuery-Date-List-Plugin
If I get time I'll try and add an option for default messages.

$("#sub2sub").append("<option value='0'>--Select--</option>");
var drop = $("#sub2cate");
drop[0].selectedIndex = 0;
<tr>
<td>
<select id="sub2sub" style="width: 144px;">
</select>
</td>
</tr>

You need to use Javascript to get current date and set it to the option values when page gets load and make them to 'selected' in OPTION.
Try this
var current_date = new Date();
var dd = current_date.getDate(); // day
var MM = current_date.getMonth(); // month
var yyyy = current_date.getFullYear(); //year

Develop Reference

JavaScript is the programming language of the Web.

how to deactivate past dates in jquery - javascript

Related

can't get startDate or endDate to work in my bootstrap datetimepicker?

jQuery/bootstrap show datepicker when button is clicked and assign value to variable without input text

Insert label inside bootstrap datetimepicker

Jquery datepicker won't allow to change date on a disabled textbox.

How to set default "Select" option in three date dropdowns(for year, month and day) in following scenario?

Categories

Resources