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

How to get the date from jQuery UI datepicker

I want to get the date from datepicker whenever user choose the date in jQuery UI datepicker and click the button on the form.
well I need to get the day, month and year of the date they choose. How can I get the date form jQuery UI?

Use
var jsDate = $('#your_datepicker_id').datepicker('getDate');
if (jsDate !== null) { // if any date selected in datepicker
jsDate instanceof Date; // -> true
jsDate.getDate();
jsDate.getMonth();
jsDate.getFullYear();
}

You can retrieve the date by using the getDate function:
$("#datepicker").datepicker( 'getDate' );
The value is returned as a JavaScript Date object.
If you want to use this value when the user selects a date, you can use the onSelect event:
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
}
});
The first parameter is in this case the selected Date as String. Use parseDate to convert it to a JS Date Object.
See http://docs.jquery.com/UI/Datepicker for the full jQuery UI DatePicker reference.

Try this, works like charm, gives the date you have selected.
onsubmit form try to get this value:-
var date = $("#scheduleDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
Reference here

the link to getdate: https://api.jqueryui.com/datepicker/#method-getDate
$("#datepicker").datepicker( 'getDate' );

Sometimes a lot of troubles with it. In attribute value of datapicker data is 28-06-2014, but datepicker is show or today or nothing. I decided it in a such way:
<input type="text" class="form-control datepicker" data-value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" />
I added to the input of datapicker attribute data-value, because if call jQuery(this).val() OR jQuery(this).attr('value') - nothing works. I decided init in cycle each datapicker and take its value from attribute data-value:
$("form .datepicker").each(function() {
var time = jQuery(this).data('value');
time = time.split('-');
$(this).datepicker('setDate', new Date(time[2], time[1], time[0], 0, 0, 0));
});
and it is works fine =)

NamingException's answer worked for me. Except I used
var date = $("#date").dtpicker({ dateFormat: 'dd,MM,yyyy' }).val()
datepicker didn't work but dtpicker did.

I just made some web scraping to discover the behaviour of JequeryUI datepicker, it was necessary for me because I'm not familiar with JS object so:
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day = $(".ui-state-active").text();
it just pick the value in relation of the changing of class, so you can implement the onchange event:
$(document).on('change', '#datepicker', function() {
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year ) ;
});
or check if the current day is selected:
if( $("a").hasClass("ui-state-active") ){
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year );
}

How do I format date in jQuery datetimepicker?

I use jQuery datetimepicker which was extended from jQuery datepicker to pick not only date but time too.
I want to set date/time format this way: dd-mm-yyyy # hh:mm
$('#timePicker').datetimepicker({
dateFormat: 'dd:mm:yyyy',
separator: ' # ',
minDate: new Date()
});
But this does not work. I get date/time in following format:
Thu Jan 27 2011 02:05:17 GMT+0100
Is there any javascript function to format this date/time? If not how do I do that using the plugin? Check out my code: FIDDLE

Here you go.
$('#timePicker').datetimepicker({
// dateFormat: 'dd-mm-yy',
format:'DD/MM/YYYY HH:mm:ss',
minDate: getFormattedDate(new Date())
});
function getFormattedDate(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear().toString().slice(2);
return day + '-' + month + '-' + year;
}
You need to pass datepicker() the date formatted correctly.

Newer versions of datetimepicker (I'm using is use 2.3.7) use format:"Y/m/d" not dateFormat...
so
jQuery('#timePicker').datetimepicker({
format: 'd-m-y',
value: new Date()
});
See http://xdsoft.net/jqplugins/datetimepicker/

This works for me. Since it "extends" datepicker we can still use dateFormat:'dd/mm/yy'.
$(function() {
$('.jqueryui-marker-datepicker').datetimepicker({
showSecond: true,
dateFormat: 'dd/mm/yy',
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});

For example, I get date/time in format Spanish.
$('#timePicker').datetimepicker({
defaultDate: new Date(),
format:'DD/MM/YYYY HH:mm'
});

you can use :
$('#timePicker').datetimepicker({
format:'d.m.Y H:i',
minDate: ge_today_date(new Date())
});
function ge_today_date(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear().toString().slice(2);
return day + '-' + month + '-' + year;
}

this worked for me.
$(document).ready(function () {
$("#datePicker").datetimepicker({
format: 'DD/MM/YYYY HH:mm:ss',
defaultDate: new Date(),
});
}
here are the CDN links
<!-- datetime picker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>

You can use the format option, as described in the documentation
$("#timePicker").datetimepicker({
format: 'Y-m-d H:i'
});