I am using a bootstrap datepicker in my site. And I want to get start date and end date from a calendar view.
For example :
As shown in above figure I want to get start date (25/09/2016) and end date (05/11/2016). And similarly for next month. For this I a am trying below code :
function available ()
{
....
}
jQuery('#date_field').datepicker({ autoclose: true,beforeShowMonth: available });
But it is not working.
How to to that?
Related
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
I'm trying to achieve a countdown timer, where the value it counts down from is populated from a Advanced Custom Field date time picker. Ideally I'd like to use http://countdownjs.org/ , or similar to power the timer.
I can simply output the time date value on the page template by calling the ACF field like so.
<p>Event starts: <?php the_field('featured_event_date','options'); ?></p>
However, in order to use a JS/jQuery countdown I need to be able to use to value from ACF inside JS, not PHP? Does this sound correct as a methodology so far? Something like the example below.
var countdown = new Countdown({
selector: '#timer',
msgBefore: 'Will start at Christmas!',
msgAfter: 'Happy new year folks!',
msgPattern:
'{days} days, {hours} hours and {minutes} minutes before new year!',
dateStart: new Date('2013/12/25 12:00'),
dateEnd: new Date('Jan 1, 2014 12:00'),
onStart: function() {
console.log('Merry Christmas!')
},
onEnd: function() {
console.log('Happy New Year!')
}
})
It's pushing my knowledge out of the comfort zone, so advice, experience or examples or this would be much appreciated and help me on my way. Thanks in advance!
I am running uxsolutions / bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker).
I have disabled dates in the popup calendar widget just fine (see code below). Yet in the date's textbox, I can enter a disabled date (screen shot below).
How can I get the date box to recognize disabled dates and prevent them from being able to be input?
$('#eventDate-container .input-group.date').datepicker({
weekStart: 1, // calendar starts on Monday
autoclose: true,
todayHighlight: true,
startDate: "4/10/2017", // disables all dates prior to this date
datesDisabled: ['01/01/1970', '12/31/2099'] // placeholder sample for possible future use
});
I know this is not the plugin you are using (Bootstrap 3 Date/Time Picker) but this might help...
I have been doing the same today, i started out with the exact plugin you are using, but then went to Bootstrap 3 Date/Time Picker because it has more options
Disable manual entry of date in , force selection via picker. #212
I patched the code:
keydown: function(e){
case 13: // enter
if (!this.o.forceParse)
break;
**if (this.picker.find('td.focused.day').hasClass('disabled'))
break;**
focusDate = this.focusDate || this.dates.get(-1) || this.viewDate;
if (this.o.keyboardNavigation) {
this._toggle_multidate(focusDate);
dateChanged = true;
}
I have created an event post type in Wordpress. For that I have put starting date and ending date from ACF datepicker.
I want admin can select Ending date greater than Starting Date.
Is there any way for restricting Starting Date and Ending Date?
For example, if Admin choose 1st Jan 2016 as starting date, then he can only select the ending date 1st Jan or greater then the selected date.
I think we can do it with java script and use this code to set the limit of the end date :
$( ".selector" ).datepicker({
minDate: new Date( )
});
I think there is no possibilities for date restriction in acf in admin area.
I may be done in acf's newer version.
You can request from here...
http://support.advancedcustomfields.com/forums/forum/feature-requests/
I had similar problem with regular date fields, Hope this JS code (with the moment JS library) with some adjustments will help you.
$(document).ready(function() {
$("input[name='Arrival']").change(function() {
var date_picked = $("input[name='Arrival']").val();
var SpecialTo = moment(date_picked, "YYYY-MM-DD");
var today = new Date();
today.setDate(today.getDate() - 240);
var selectedDate = new Date(date_picked);
if (today <= selectedDate) {
//alert('Date is today or in future');
} else {
alert('Date is in the past');
$("input[name='Arrival']").val('');
}
});
})
If you could post the source HTML of the date input with a value, I could change it probably to what you looking for.
This works just fine. Just get the name fields with inspect element. Add this code in the functions.php file.
add_action('acf/validate_save_post', 'my_acf_validate_save_post', 10, 0);
/**
* #throws Exception
*/
function my_acf_validate_save_post() {
$start = $_POST['acf']['field_61a7519a57d99'];
$end = $_POST['acf']['field_61a751d957d9a'];
// check custom $_POST data
if ($start > $end) {
acf_add_validation_error('acf[field_61a751d957d9a]', 'End date should be greater than or equal to start date.');
}
}
When you open inspect element the input field should look like this:
<div class="acf-date-picker acf-input-wrap" data-date_format="dd. MM yy" data-first_day="1">
<input type="hidden" id="acf-field_61a751d957d9a" name="acf[field_61a751d957d9a]" value="20211201">
<input type="text" class="input hasDatepicker" value="16. January 2022" id="dp1638477022818">
</div>
More information you can find here:
https://www.advancedcustomfields.com/resources/acf-validate_save_post/
I have a list of months to the left of my calendar. How can I use these month tabs to navigate through the calendar?
I am using something like this, where each anchor in #months-tab is a different month:
$('#months-tab a').click(function() {
$('#calendar').fullCalendar('next');
});
However, it doesn't matter which month I click it will go to the next month. If the calendar is on October and I click March it won't navigate to March, it will navigate to the next month, which is November.
I know why it doesn't work but I haven't figured out to get it to work they way I need it to. Any ideas?
Update I began doing something along the lines of this:
var date = new Date();
var currM = date.getMonth();
$j('.months-tab a').on('click', function(e){
e.preventDefault();
var newM = $j(this).attr('class');
$j('#calendar').fullCalendar('gotoDate', newM-1);
});
You should use gotoDate instead of next. This way you can display the calendar at the correct date.
The following javascript will work as long as you have the attribute data-month in each <a>.
Notice that months() is a zero based index, so January will have the index 0. If you have any doubts abour momentjs, please visit their documentation.
$('#months-tab a').click(function() {
var month = $(this).attr('data-month');
var m = moment([moment().year(), month, 1]);
$('#calendar').fullCalendar('gotoDate', m );
});
You can check this JsFiddle that provides a working example with the full code.