Develop Reference

How to prevent clicking on dates and display alert message in bootstrap datepicker?

So my code is as below:
var date = new Date();
var active_dates = [<?php
$i=0;
for($i=0;$i<=count($booked_dates);$i++) {
echo "'".$booked_dates[$i]."',";
}
?>];
date.setDate(date.getDate()+1);
$('#single_datepicker_1').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
templates: arrows,
startDate: date, //disable all old dates
setDate: date, //tomorrow's date allowed
multidate: true,
format: 'dd/mm/yyyy',
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'bookedDates'
};
}
return;
}
//maxDate: '28/12/2019'
});
Now the code which prevent booked dates clickable and display alert message:
$('.bookedDates').click(function(event) {
console.log('Preventing');
event.preventDefault();
event.stopPropagation();
alert("fdf");
});
Now, based on above code my datepicker looks like below:
However, the issue is when I go to the next month like, April then the alert message is not displaying and the reason is, April month is not initially loaded on datepicker. As current month is March.
So if you click on any below dates alert message won't be display:
can anyone please let me know what I should do so that the alert message will display if I click on April month dates.
Thanks:)

The library provides a way to disable some dates. Simply pass this as part of your options.
datesDisabled: [date_sttings],
Or you can pass a single date string. Note the date strings must follow the date format you already defined.
Alternatively you can have an array of disabled dates. And when users select a date. You first check to see if its in the array of disabled dates. If it is, you then show the alert and perform other actions as you please.

JQuery - Add todays date to div when checkbox is checked

I'm trying to add todays date inside a div when a checkbox has been checked. I can get this to work in the console but not on the page. I don't get any console errors when I run the script in the console or whne the page is loaded. I've tried adding:
$( document ).ready(function()
to the script, but I get an error. Here is my script:
function GetTodayDate() {
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('input[name=cb-switch]').is(':checked') {
$('div#startDate').html(currentDate).appendTo(document);
}
};
Any help appreciated. Thanks in advance.

this is a simple example .you can use this code.
I hope is useful for you.
<script type="text/javascript">
$(document).ready(function()
{
$('#myid').change(function()
{
if ($(this).prop('checked'))
{
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('div#startDate').append("<p>"+currentDate+"</p>");
}
else {
alert("You have elected to turn off checkout history."); //not checked
}
});
});
</script>
myid is id of your checkbox

In your document ready you are missing the click event handler for changes.
$('input[name=cb-switch]').click(GetTodayDate)
IF you only want to call the function on load do
$(document).ready({
GetTodayDate();
});

It looks like there is a minor issue, is(':checked') a Boolean value. and since it is not under if statement it might be saying unexpected {. so change that line of code to:
if($('input[name=cb-switch]).is(':checked')) {
$('div#startDate').html(currentDate);
}
And it will work when you call your method.
To call your method do this:
$("input[name=cb-switch]").change(function(){
GetTodayDate();
});
Hope this helps.
Cheers!!!

jquery multipledatespicker returning value

i am currently using a plugin called multipledatespicker that are derived from the jquery UI, i've gotten most of my calender setting right, just that i'm not sure how should i return the value into a input box from the inline block calender.
<div class="iDate"></div>
<input type="text" name="something" id="something" value="" />
var unavailableDates = ["9-7-2016"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1)
return [true, ""];
else
return [false, "denied", "Unavailable"];
}
var dateToday = new Date();
$(".iDate").multiDatesPicker({
defaultDate: new Date(),
dateFormat: 'dd MM yy',
beforeShowDay: unavailable,
minDate: dateToday,
});
var dates = multiDatesPicker('value');
document.getElementById('something').value = dates;
how can i show the multiple selected values of iDate into the input box "something" ?

If you bind your multiple date picker to the input box instead of the div then you you will get multiple comma separated dates in that input box after selecting a date. You can make input box readonly so no one can manually edit the dates selected.
Alternatively you can use datepicker's on select event to put the values into hidden elements or js arrays etc.
Example:
var dateToday = new Date();
$(".iDate").multiDatesPicker({
defaultDate: new Date(),
dateFormat: 'dd MM yy',
beforeShowDay: unavailable,
minDate: dateToday,
onSelect: function(date) {
AddDate(date);
}
});
//pseudo code -> have no time at work...
create mydates object // array that holds selected dates
function AddDate(value) {
//warning pseudo code
if value in mydates -> remove it for mydates
else -> add value to mydates
}

minDate function dont work correctly in date picker with time picker

I using date & time picker but don't work bellow function correctly.
I guess the time picker minDate function jQuery UI have conflict with time picker
I'm change the location script and delete minDate functions in time picker but doesn't work correctly
jQuery('.datepicker1').datetimepicker({
onSelect: function(dateText, inst) {
jQuery('.datepicker2').datetimepicker({
minDate: new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']),
});
},
});
can u help me please?

I use this
jQuery("#datepicker").datepicker({minDate:"+0d",onSelect:function(tarih){
jQuery("#datepicker2").datepicker("destroy");
var myDate = new Date(tarih)
myDate.setDate(myDate.getDate() + 1)
tarih = myDate.getFullYear().toString() + "/"
tarih += (myDate.getMonth() + 1).toString() + "/"
tarih += myDate.getDate().toString()
jQuery("#datepicker2").datepicker({minDate:tarih}).delay(100).val(tarih);
}});

Update 2nd Textbox Based On Popup Calendar Selection

I am using the JavaScript-based popup calendar from dynamic drive named
"Xin's Popup Calendar" and it works perfectly. But, I want to be able to
adjust the date of a 2nd textbox based on the selection.
For example, I want to be able to automatically adjust it to +1 month of
whatever date was selected in the popup. How can I do that?
Here is an example:
<input type="text" name="firstinput" size=20>
<small>Select Date</small>
<p>
<input type="text" name="secondinput" size=20>
<small>Select Date</small>
</p>
If the firstinput date is 3/21/10, I want the secondinput to change to 4/21/10 at the same time.

There are two parts to this: (1) a function to add a month to a data and (2) the change event handler to the textbox. This solution is very specific to the Xin Pop Up Calendar.
function addMonth(d,month){
t = new Date (d);
t.setMonth(d.getMonth()+ month) ;
if (t.getDate() < d.getDate())
{
t.setDate(0);
}
return t;
}
$("input[name='firstinput']").change(function(){
var dt = $(this).val();
var yr = dt.substring(0,4);
var mo = dt.substring(5,7);
var dy = dt.substring(8,10);
var firstDate=new Date();
firstDate.setFullYear(yr,mo-1,dy);
var secondDate = addMonth(firstDate,1);
$("input[name='firstinput']").val(secondDate.getFullYear() + "/" + secondDate.getDate() + "/" + secondDate.getMonth()+1);
});