how to disable custom dates along with previous dates in datepicker? - javascript

I am trying to disable some dates along with that I, am trying to disable past dates as well.Kindly, give some help where I can delete past dates in date picker.
<div class='input-group date' id='datepicker1'>
<asp:TextBox runat="server" ID="txtdatepicker">
</asp:TextBox>
</div>
<script type="text/javascript">
$(function () {
var disableSpecificDates = ["19-8-2021", "28-8-2021", "26-
8-2021"];
$('#datepicker1').datepicker({
format: 'mm/dd/yyyy',
beforeShowDay: function (date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) +
"-" +
date.getFullYear();
if (disableSpecificDates.indexOf(dmy) != -1) {
return false;
}
else {
return true;
}
}
});
$('#datepicker1').datepicker("setDate", new Date());
});
</script>

Instead of deleting you can disable the past date.
$('#datepicker1').datepicker("minDate", new Date());
});

Related

How to disable both certain days of the week and some specific dates in jquery DatePicker?

I'm trying to diable specific days of the week and some specific dates using a script, and echoing the dates from the database with php, this is what I came to so far
<script>
$(function() {
var unavailableDates = ["1-1-2022"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#datepicker").datepicker({
dateFormat: 'dd MM yy',
minDate: 0,
beforeShowDay: unavailable
});
});
});
$("#datepicker").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 0 || day == 1) {
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
</script>

Datepicker duplicate issue javascript

i'm trying to reset datepicker onclick event but click on button datepicker will be duplicate. How to reset datepicker without duplication.
Here i'm Initialize datepicker
function datePicker()
{
var datePickerValue = $('.datepicker-start').val();
var date = new Date(datePickerValue);
date.setDate(date.getDate() + 1);
var dd = date.getDate();
var mm = date.getMonth() + 1;
var y = date.getFullYear();
var newEndDate = y + '-'+ mm + '-'+ dd;
$('.datepicker-end').datetimepicker({
format: 'YYYY-MM-DD',
minDate: newEndDate,
});
}
this is code for reset datepicker
function reset()
{
$('#datepicker2').datepicker('setDate', null);
}
here is i call reset function
Close
check that pic
jquery datetimepicker can be reset using below line.
$('#input').datetimepicker('reset');

Current day , month, year from datepicker

I have the below piece of code for getting me the current date.
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
currentText: "Today:" + $.datepicker.formatDate('dd mm yy', new Date())
});
How do i extract to alert day, month, year separately.
var d = new Date();
var date = d.getDate();
var month=d.getMonth()+1;
// we are adding 1 to getMonth Method, becoz it will return 0 to 11
var year=d.getFullYear();
Hope it helps..
Please try,
var today = new Date();
console.log(today.getDate());
console.log(today.getMonth());
console.log(today.getFullYear());
SoF reference
How to format a JavaScript date
So after looking on the web you can do that :
var date = $.datepicker.formatDate('dd mm yy', new Date());
alert("Day:" + date.getDay() + "month:" + date.getMonth() + "year:" + date.getFullYear());
Try this.
You can use the onSelect event
<html>
<head>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function ($) {
$("#dataPicker").datepicker({
onSelect: function (dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
alert("Day " + (new Date(dateText)).getDate() + " Month: " + (new Date(dateText)).getMonth() + " Year: " + (new Date(dateText)).getFullYear())
}
}).on("change", function () {
display("Got change event from field");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
</script>
</head>
<body>
<div id="dataPicker">
</div>
</body>
</html>
I think you should do this way
$('#txtSelectedDate').datepicker({
showButtonPanel: true,
currentText: "Today:" + $.datepicker.formatDate('dd mm yy', new Date()),
onSelect: function(){
var day = $("#txtSelectedDate").datepicker('getDate').getDate();
alert(day);
var month = $("#txtSelectedDate").datepicker('getDate').getMonth() + 1;
alert(month);
var year = $("#txtSelectedDate").datepicker('getDate').getFullYear();
alert(year);
}
});
Initialize the datepicker with the altField option specified:
$( ".selector" ).datepicker({
altField: "#actualDate"
});
Initialize the datepicker with the altFormat option specified:
$( ".selector" ).datepicker({
altFormat: "yy-mm-dd"
});
Please refer for more detail:-
http://api.jqueryui.com/datepicker/

jQuery Datepicker UI Tooltip

Is it possible to add tooltip only to the disabled dates in jQuery datepicker?
$(function() {
$('#datepicker').datepicker({
minDate : 0,
maxDate : +30,
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
}
});
});
My code puts the tooltip to all dates.
Yes. It is possible. Check the below link to know more on disabling date.
http://api.jqueryui.com/datepicker/#option-beforeShowDay
Below is the code
var disabledDates = ["11-2-2016","19-2-2016","28-2-2016"];
function disableDate(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, disabledDates) < 0) {
return [true,"",""];
} else {
return [false,"","This is disabled"];
}
}
$('.datePicker').datepicker({ beforeShowDay: disableDate });
Demo : https://jsfiddle.net/j2caztgu/

beforeShowDay in bootstrap datepicker disables the next date

I have mulitple datepickers on a page, once I select one I want to disable it from the next datepicker. I have used the below code.
jQuery('.date-picker', jForm).datepicker({
startDate: new Date(),
autoclose: true,
todayHighlight: true,
beforeShowDay:function(Date){
var curr_date = Date.toJSON().substring(0,10);
if (forbidden.indexOf(curr_date)>-1) return false;
}
});
Forbidden is the array of selected dates, the above code disables the following day, not the selected one (example if I select 2015-06-04 it disables 2015-06-05).
Here I am not using bootstrap datepicker
DEMO
var unavailableDates = ["19-8-2015","14-8-2015"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}
$('#unvailable').datepicker({ beforeShowDay: unavailable });

Categories

Resources