I could able to stop future dates as .datetimepicker({maxDate: new Date()}
Is there any function for Time also?
Use this, if you are using the Bootstrap DateTimePicker from http://eonasdan.github.io/bootstrap-datetimepicker/ :
function ValidateDateTimePicker() {
var eventTime = $("#dateTimePickerField").data('DateTimePicker').date();
var currentTime = new Date();
if (eventTime > currentTime) {
alert("error")
}
}
Related
I am trying to calculate the end time of an appointmnent. I am using pickatime and pickadate by amsul and I combined the the two values to one.
$(document).ready(function(){
var datepicker = $('#date').pickadate({
container: '#outlet',
onSet: function(item) {
if ( 'select' in item ) setTimeout( timepicker.open, 0 )
}
}).pickadate('picker')
var timepicker = $('#time').pickatime({
container: '#outlet',
onRender: function() {
$('<button>back to date</button>').
on('click', function() {
timepicker.close()
datepicker.open()
}).prependTo( this.$root.find('.picker__box') )
},
onSet: function(item) {
if ( 'select' in item ) setTimeout( function() {
$datetime.
off('focus').
val( datepicker.get() + ' ' + timepicker.get() ).
focus().
on('focus', datepicker.open)
}, 0 )
}
}).pickatime('picker')
var $datetime = $('#datetime').
on('focus', datepicker.open).
on('click', function(event) { event.stopPropagation(); datepicker.open() })
What I am tryig to do is adding the duration time to the date and time was picked for the end date. I tried to use getHours and setHours but It is not working.
var sart_time = $('#datetime').val()
I need to do somting like this
var end_time = $('#datetime').val()+duration
I have solved the problem by using momentjs. Here is the code just in case someone came across similar issue.
var booking_start = $('#datetime').val()
var booking_end = moment(booking_time).add(**duration**, 'hours').format('LLL')
duration is a var
How to disable the past date and the past month using full calendar in select option I tried out with this function in full calendar
select: function(start, end, allDay) {
var check = $.fullCalendar.moment(start).format('DD-MM-YYYY');
var today = $.fullCalendar.moment(new Date()).format('DD-MM-YYYY');
if (check >= today) {
}
}
but not working, it disables next month also. if it possible in javascript? also it fine.Demo link
Here is some googled code snippet.
you can add this code in your select function.
select: function(start, end, allDay) {
var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if(check < today)
{
// Previous Day.
}
else
{
// Right Date
}
},
Your condition totally works.
select: function(start, end, allDay) {
var check = $.fullCalendar.formatDate(start, 'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(), 'yyyy-MM-dd');
if (check >= today) {
// True conditions
}
}
Please check this fiddle
You can disabling past date and the past month of a full calendar using minDate attribute of datepicker.
var dateToday = new Date();
$('#visit').datepicker({
minDate: dateToday
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="https://davidwalsh.name/demo/jquery-ui-css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<input type='text' id='visit' />
So, my countdown script is for some reason not compatible with my code.
Im trying to make it countdown to a specific time each day, but my web store is limited to only use jquery 1.x with all my other plugins so no other jquery version can be used.
https://jsfiddle.net/nskhbL12/
<script>
window.onload = date;
function ShowTime() {
var now = new Date();
var hrs = 20-now.getHours();
var mins = 60-now.getMinutes();
var secs = 60-now.getSeconds();
timeLeft = "" +hrs+' t : '+mins+' m : '+secs+' s';
$("#countdown").html(timeLeft);
}
var countdown;
function StopTime() {
clearInterval(countdown);
}
setInterval(ShowTime ,1000);
</script>
<span id="date">Order before <span id="countdown"></span> and receive your package tomorrow!</span>
Try with
jQuery(function($) {
setInterval(ShowTime ,1000);
});
Or use something like
$ = jQuery;
I would like to set the initial date and end date.
so when I call the function to display the calendar that will show only date between startdate and enddate.
Say for example the user selects a initial date 11-03-2014 and end date 17-03-2014 so what i went to display is it will display event of 12-03, 13-03,14-03,15-03,16-03.
I tried to call 'gotodate' display function but this doesn't seem to work.
You call 'gotodate' after initializing your calendar, and you move to the desired date.
Apart from that, in viewDisplay callback you set the min and max dates, and you disable the 'previews' and 'next' buttons when user reach the edges...
in the following example it allows navigation between today and 5 days in the future
viewDisplay: function(view) {
var today = new Date();
today = new Date ( today.getFullYear(), today.getMonth(), today.getDate() );
var maxDayLimit = new Date( new Date(today).setDate(today.getDate() + 5) );
if( view.end >= maxDayLimit ) {
$(".fc-button-next").addClass("fc-state-disabled");
}
else{
$(".fc-button-next").removeClass("fc-state-disabled");
}
if( view.start <= today ){
$(".fc-button-prev").addClass("fc-state-disabled");
}
else{
$(".fc-button-prev").removeClass("fc-state-disabled");
}
}
dynamic date:add this event in calendar function and this is dynamically pass date by function_name(_start_date,_end_date)
and starting from now viewRender Event:
viewRender: function (view) {
var moment1 = $('#calendar').fullCalendar('getDate');
var current_year = moment(moment1).format('YYYY-MM');
var start_year = moment(_start_date).format('YYYY-MM');
var end_month = moment(_end_date).format('YYYY-MM');
if (current_year >= end_month) {
$(".fc-next-button").addClass("fc-state-disabled");
bootbox.alert('Your Academic Session is over');
//alert('Your Academic Session is over');
}
else {
$(".fc-next-button").removeClass("fc-state-disabled");
}
if (current_year <= start_year) {
$(".fc-prev-button").addClass("fc-state-disabled");
bootbox.alert('Your Academic Session is over');
//alert('Your Academic Session is over');
}
else {
$(".fc-prev-button").removeClass("fc-state-disabled");
}
}
dateContainer.datepicker({
defaultDate: this.filterValue,
changeMonth: true,
changeYear: true,
dateFormat: 'MM-dd-yyyy',
onSelect: function (dateText, t) {
var type = $context.container.find(".grid-filter-type").val();
$context.cb(type, dateText);
}
});
I'm using gridmvc.js and bootstrap-datepicker.js plugin.
OnSelect event is not firing anyway. I don't know what is the reason ?
I don't know because of what, the problem is occurred. But I've found the temporary solution for this. For the solution, you've to change one line of code in bootstrap-datepicker.js. (Check about the license before you change and use the plugin)
case 'span':
if (!target.is('.disabled')) {
this.viewDate.setUTCDate(1);
if (target.is('.month')) {
var day = 1;
var month = target.parent().find('span').index(target);
var year = this.viewDate.getUTCFullYear();
this.viewDate.setUTCMonth(month);
this._trigger('changeMonth', this.viewDate);
if (this.o.minViewMode === 1) {
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
} else {
var year = parseInt(target.text(), 10)||0;
var day = 1;
var month = 0;
this.viewDate.setUTCFullYear(year);
this._trigger('changeYear', this.viewDate);
if (this.o.minViewMode === 2) {
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
}
this.showMode(-1); this.fill();
Here the problem is occured because of this.fill() is called.
if you comment this line in plugin, datepicker won't hide any way on month and year change. Or you can change by following,
if (target.is('.month')) {
if (!this._o.changeMonth) {
this.fill();
}
}
else {
if (!this._o.changeYear) {
this.fill();
}
}
Then this will work, based on the parameter you've given while creating datepicker.