var FromEndDate = new Date();
$('.conv_datetimepicker').datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
endDate: FromEndDate,
autoclose: true
});
Use this, if you are using the Bootstrap DateTimePicker from http://eonasdan.github.io/bootstrap-datetimepicker/ :
function ValidateConvTime() {
var eventTime = $("#conv_datetimepicker").data('DateTimePicker').date();
var currentTime = new Date();
if (eventTime > currentTime) {
alert("error")
}
}
Related
I have a question about fullcalendar v5.3.2 and its options.
I have following set up.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'ja',
themeSystem: 'bootstrap4',
height: 700,
events: '/api/user/calendar/'+<?= $user->id?>+'<?= date("/Y/m")?>',
});
I am trying to change events url and refresh the calendar when clicking the next,previous and today button.
This is because I want to fetch events monthly.
Is that possible to do it?
Best regards,
I could set events url like following.
calendar.setOption('events', 'MY_NEW_URL');
The full source code is as following.
var btn = document.getElementsByClassName('fc-button-primary');
for(let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var selectedYear = document.getElementsByClassName('fc-toolbar-title')[0].textContent.match(/^[0-9]*/)[0];
if(currentYear != selectedYear)
{
currentYear = selectedYear;
calendar.setOption('events', '/api/user/calendar/'+<?= $user->id?>+'/'+currentYear+'/'+document.getElementsByClassName('fc-toolbar-title')[0].textContent.match(/^[0-9]*/)[1] ); }
})
}
Anybody knows how can I display some dates from mysql table into bootstrap datepicker js code? Also mindate needed to be today() date.
Any help would be appreciated!
js code:
<script type="text/javascript">
var todayDate = new Date().getDate();
var datepicker, config;
config = {
format: 'yyyy-mm-dd',
uiLibrary: 'bootstrap4',
disableDates: [<?php while ($off = $daysoff->fetch(PDO::FETCH_ASSOC)) { echo implode("'",$off['day'],"', ");} ?>],
disableDaysOfWeek: [0],
minDate: '<?php echo date(); ?>'
};
$(document).ready(function () {
datepicker = $('#datepicker').datepicker(config);
$('#ddlLanguage').on('change', function () {
var newLang = $(this).val();
config.locale = newLang;
datepicker.destroy();
datepicker = $('#datepicker').datepicker(config);
disableDates: [new Date(2017,10,11), '20/07/2018'];
});
});
</script>
and mysql query:
select day from daysoff where status='Active'
Solved!
<?php while ($off = $daysoff->fetch(PDO::FETCH_ASSOC)) { $offs[] = $off['day']; $json_array = json_encode($offs);} ?>
<script type="text/javascript">
var arrayObjects = <?php echo $json_array; ?>;
var todayDate = new Date().getDate();
var datepicker, config;
config = {
format: 'yyyy-mm-dd',
uiLibrary: 'bootstrap4',
disableDates: arrayObjects,
disableDaysOfWeek: [0],
minDate: new Date(new Date().setDate(todayDate -1)),
maxDate: new Date(new Date().setDate(todayDate +30))
};
$(document).ready(function () {
datepicker = $('#datepicker').datepicker(config);
$('#ddlLanguage').on('change', function () {
var newLang = $(this).val();
config.locale = newLang;
datepicker.destroy();
datepicker = $('#datepicker').datepicker(config);
});
});
</script>
The fullcalendarAPI is in use . This will write a sentence if there is a question of being developed .
Although events in the fc-event when you expose the calendar is exposed to the calendar , we want to prevent that time , the soil , the expression on Sunday . Is there a way....?
example :
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
You can take the events start/end and break it up into sections.
https://jsfiddle.net/31gayu5b/4/
/* Fiddle specs: fullcalendar v2.4.0, moment v2.10.6, jQuery v2.1.4 */
/* If chop is true, it cuts out Saturday, Sunday */
var events = [{
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, no weekends!',
id: 'month-long-no-weekends',
chop: true
}, {
start: '2016-02-01',
end: '2016-03-01',
title: 'This is the whole month long, including weekends!',
id: 'month-long-weekends',
chop: false
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (no weekends)',
id: 'start-sun-no-weekends',
chop: true
}, {
start: '2016-02-07',
end: '2016-02-16',
title: 'Starts Sunday ends Tuesday the week after (has weekends)',
id: 'start-sun-weekends',
chop: false
}];
$('#calendar').fullCalendar({
defaultDate: '2016-02-01',
events: chopEvents(events),
eventClick: function(event, jsEvent, view) {
alert(event.id);
},
eventRender: function(event, element, view) {
console.log(event);
if (event.chop)
element.css('background-color', 'green');
}
});
function chopEvents(events) {
var chopped = [];
$(events).each(function() {
var event = this;
if (this.chop) {
var segments = makeChunks(this);
$(segments).each(function(index, dates) {
var start = dates.shift();
var end = dates.pop();
event.start = start;
event.end = end;
chopped.push($.extend({}, event));
});
} else {
chopped.push(event);
}
});
return chopped;
}
function makeChunks(event) {
var seg = 0;
var segments = [];
var start = moment(event.start);
var end = moment(event.end); //.add(1, 'day'); /* May want to add 1 day? */
for (var day = moment(start); day <= end; day = day.add(1, 'day')) {
var dayOfWeek = day.format('E');
if (dayOfWeek == 7) {
segments[++seg] = [];
continue;
}
if (segments[seg] === undefined) {
segments[seg] = [];
}
segments[seg].push(day.format('YYYY-MM-DD'));
}
segments = segments.filter(function(i) {
return i !== null && i.length > 1;
})
// console.log(JSON.stringify(segments, null, 2));
return segments;
}
I'm trying to translate or create similar code using RaphaelJS. If you look at the code, you will see that I'm trying to create an animated path using css and js.
http://plnkr.co/edit/FC2qiZumzgjKSJOs6Zm5?p=info
var spinner = function() {
this.transition = function() {
var path = document.querySelector('#spinner-wrapper .spinner #main-path');
path.style.transition = path.style.WebkitTransition = 'none';
path.style.strokeDasharray = '205.951';
path.style.strokeDashoffset = 430;
path.getBoundingClientRect();
path.style.strokeDashoffset = '0';
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};
this.startInterval = function(immediate,time) {
if(immediate){
setTimeout(transition,0);
}
this.interval = setInterval(function() {
transition();
}, time);
return this.interval;
};
this.start = function() {
clearInterval(this.interval);
startInterval(true,2700);
};
this.stop = function() {
clearInterval(this.interval);
startInterval(false,0);
};
return this;
};
I'm using jQuery and RaphaelJS. It still doesn't work in IE browsers for some reasons. Maybe you can figure this out.
http://jsfiddle.net/shojib/ceqs86go/
var paper = new Raphael('canvas');
var pathString = "M16.47,19.938c7-0.5,4.5-10.5-2-7c-7,3.5,1,13,7.5,10 c13.5-7-9.5-27-16-6.5c-4.5,16,22,17,26,2c4.5-15.5-15-22.5-25-11.5c-5.5,6.5-9,16-0.5,21.5c4,2.5,15,6,19,2.5 c-3-3.5-7.5-8-9.5-10.5";
var pattern2 = paper.path(pathString);
pattern2.attr({fill: 'none',stroke: '#ffffff',"stroke-miterlimit": '10','stroke-opacity': '1'});
var pattern1 = paper.path(pathString);
pattern1.attr({fill: 'none',stroke: '#CD5300',"stroke-miterlimit": '10','stroke-opacity': '1'});
$(pattern1.node).css({
'stroke-dasharray': '210.991px',
'stroke-dashoffset': '430px'
});
$(pattern1.node).animate({
'stroke-dashoffset': '0'
},{
duration: 3000,
easing: 'linear'
});
I have a Template helper that attempting to return the current "Day" from the database. What's happening is that even though the current day or date exists in the database, for some reason my helper doesn't see that and creates another date.
client:
Template.days.helpers({
day: function() {
console.log("day called");
var now = new Date();
var month = now.getUTCMonth();
var day = now.getUTCDate();
var year = now.getUTCFullYear();
var bottomRangeDate = new Date(year, month, day);
var topRangeDate = new Date(year, month, day + 1);
// console.log('bottomRangeDate', bottomRangeDate);
// console.log('topRangeDate', topRangeDate);
var currentDay = Days.findOne({"date": {"$gte": bottomRangeDate, "$lt": topRangeDate }});
// console.log(currentDay);
if (currentDay !== undefined) {
// console.log("current day exists");
Session.set('currentDayId', currentDay._id);
return currentDay;
} else {
// console.log('current day is undefined');
Meteor.call('createDay', now, function(error, result) {
if(!error)
Session.set('currentDayId', result);
});
// console.log("current day does not exist");
}
}
});
server:
Meteor.methods({
createDay: function(date) {
console.log("date ", date);
var dayId = Days.insert({
date: date
});
return dayId;
}
});
So what I need to do is to see if today or "date" exists in the database, and if it does return it. If does not, I need to create it.
Edit
Here's a screen shot console after refreshing the browser and call find().fetch() on the collection.
Edit #2
I changed the code up a little to try and get it to work with moment:
Template.days.helpers({
day: function() {
var bottomRangeDate = moment().startOf('day').toDate();
var topRangeDate = moment().endOf('day').toDate();
var now = new Date();
console.log('bottomRangeDate: ', bottomRangeDate);
console.log('topRangeDate: ', topRangeDate);
var currentDay = Days.findOne({"date": {"$gte": bottomRangeDate, "$lt": topRangeDate }});
if (currentDay !== undefined) {
Session.set('currentDayId', currentDay._id);
return currentDay;
} else {
Meteor.call('createDay', now, function(error, result) {
if(!error) {
Session.set('currentDayId', result);
return Days.findOne({_id: result });
}
});
}
}
});
I'm still getting duplicates: