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
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>
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');
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/
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/
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 });