grails textfield with formatDate - datetime

I have the following textfield in my gsp page that does not work as expected:
<g:textField name="startTime"
value="${formatDate(date: occurrenceStart ? new Instant(occurrenceStart).toDate() : eventInstance?.startTime, format: 'dd/MM/yyyy hh:mm a')}"
class="datetime" />
I'm using the source code found here, but each time I select a date and time, the date is shown as MM/dd/yyyy. Where is the place in which I need to change the format?
EDIT:
Usually I use Mozilla Firefox to test my project. If I use Google Chrome browser, I have the following formatting date(choosing the 12th of January 2014, 5:00 AM) after the change suggested in Adavis answer:
12/January/20142014 hh:01 a 05:00 am
If I remove the code added, I have the same behaviour described above, with formatting MM/dd/yyyy

In this file: https://github.com/craigburke/google-calendar-grails/blob/master/web-app/js/calendar.js, line 60, in setupDatePickers(), you need to add your date format to the default options of datetimepicker. See below...
function setupDatePickers() {
$("input.datetime").datetimepicker({
ampm: true,
stepMinute: 15,
dateFormat: 'dd/MM/yyyy hh:mm a'
});
}

Solved with the following code:
function setupDatePickers() {
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy'
});
$("input.datetime").datetimepicker({
ampm: true,
stepMinute: 15
});
}

Related

How to prevent entry of a disabled date in bootstrap-datepicker

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

How to get start date and end date from calendar view in bootstrap datepicker

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?

Convert FullCalendar Event timeFormat to 12 hr for Month view - bug?

I'm using Fullcalendar 2.3.1. I'm trying to convert the time (for example 13:00-14:00) in the month view into 12hr format. Here is my current timeFormat option value:
timeFormat: 'h(:mm)t'
and some example event json:
{
id: "40163152543",
original_id: "3231",
title: "Conference Call",
description: "",
start: "2015-11-20T13:00:00",
end: "2015-11-20T14:00:00",
allDay: false,
color: ""
}
In Week and Day views I am seeing 1p-2p, which is what I want, but in month view I am still seeing 13:00-14:00. Same issue in v 2.6.0! Is this a bug??
It should work. I tried it locally and works fine as per your configuration.
But still you face same issue then try by giving view specific option. May this will solve.
So in the extension library I'm using there was an eventRender callback that I was missing that was overriding the timeFormat option. This is the working override if curious:
eventRender:
function(event, element, view)
{
if(event.end !== null && view.name == 'month')
{
timeformat = event.start.format('h(:mm)t') + ' - ' + event.end.format('h(:mm)t');
element.find('.fc-time').html(timeformat);
}
}
If you have this issue, lookout for an eventRender callback! More documentation on it here: http://fullcalendar.io/docs/event_rendering/eventRender/
Very useful callback, also cool way to do view-specific options, especially with the default view, and #ChintanMirani answer was great too!

How can I restrict Two dates in ACF date picker for Starting date and Ending Date in Wordpress?

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/

Display ending time in fullcalendar week view only

Edit to add: Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
end of edit
I'm using fullcalendar, and I want to include the ending time in the "week" and "day" views. I found an answer by Nico on how to display the ending time:
timeFormat: 'HH:mm { - HH:mm}'
Nico wrote:
Blockquote the time between {} is the end time. If you don't specify the ending time between curly brackets it will just display the start time twice
How could I only show the end time in views other than the full month view? I would like the regular week view to have start and end time. (In month view, it just takes too much space.)
Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
UPDATE
The above answer no longer works in the newest version of FullCalendar. The correct answer is the use the displayEventEnd option for the view. Like this:
views: {
week: {
displayEventEnd: true
}
}

Resources