Develop Reference

vue-good-table date format 2019-02-26T02:11:56.308466-08:00

There is date type field, for example:
{
label: 'Created at',
field: 'creationDateF',
type: 'date',
inputFormat: 'DD-MM-YYYY HH:mm:ss', //e.g. 07-09-2017 19:16:25
outputFormat: 'DD-MM-YYYY HH:mm:ss'
}
How should I set this if my input format looks like:
2019-02-26T02:11:56.308466-08:00
? Excepted output is for example Feb. 21, 2019, 2:44 a.m. I can handle this but I don't know how to set up input format.

I hope you found the answer since those 2 years but for people still looking here is the correct format syntax to use:
dateInputFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSSSSXXX',
or
dateInputFormat: 'yyyy-MM-dd\'T\'HH:mm:ss.SSSSSSxxx',
depending if the indicator "Z" is used when time offset is 0 (first case) or not (second case)

vue-good-table uses 'date-fns' for converting Date. you can find its code here.
I've tried similar code:
var dateFns = require("date-fns")
var v='2019-02-26T02:11:56.308466-08:00';
var dateInputFormat='MMM. DD, YYYY, hh:mm a.';// you can write every thing as format string here
var dateOutputFormat='MMM. DD, YYYY, hh:mm a.';
const date = dateFns.parse(v, dateInputFormat, new Date());
Con dateFns.format(date, dateOutputFormat);
it worked correctly. test your self here
since your input format is ISO compatible, you should not worry about input format. It works Even if you put wrong input Format in definition part...
note: java script date just have 3 digit after second part so your input count as 2019-02-26T02:11:56.308-08:00 and 0.000466 will be omitted..
note: The displayed value is converted to your local time zone.

How is Bootstrap / Moment DateTimePicker failing to display the correct 24 hour format?

I've been plugging away at this for too long and I cannot see where the formatting for Bootstrap's datetimepicker control is being overridden.
The Bootstrap DTP uses Moment.js behind the scenes to format its time picker. The JS code looks like this:
selector.find(".datepicker").each(function() {
var $that = $(this);
$that.datetimepicker({
sideBySide: true,
useCurrent: false,
minDate: new Date(1910, 1, 1)
});
$that.children("input").on("focus", function() {
$that.data("DateTimePicker").show();
});
});
Nothing appears too complex there and the formatting in the HTML looks similarly simple:
#Html.EditorFor(x => x.DateTime, new { #dateFormat = "DD/MM/YYYY HH:mm", #mandatory = true })
However when the model is bound to the view and the JS iterates over the inputs, the times displayed go from 24 hour (e.g. 14:00) to 12 hour (i.e. 02:00).
I'm convinced this has to do with moment.js integration and very likely its handling of timezones but I can't see where I might apply different settings. Suggestions would be more than welcome at this point.

Try this
$that.datetimepicker({
format: 'DD/MM/YYYY HH:mm',
sideBySide: true,
useCurrent: false,
minDate: new Date(1910, 1, 1)
});

jQuery's datepicker "minDate" not working

I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk

I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox

Bootstrap datepicker multiple formats

I am using Backbone.js with a Bootstrap Datepicker in my form.
The brief was to allow the client to use the 'dd.mm.yyyy' format, so I set the option on the datepicker.
self.$el.find('[data-role="invoicedate"]').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
todayHighlight: true,
language: Application_language
});
Then the client wanted to allow 'dd.mm.yy' also, and to have it autotranslated, so I did the following:
invoicedateToModel: function() {
var invoicedate = this.$el.find('[data-role="invoicedate"]').val();
var re2 = /^(\d{2})\.(\d{2})\.(\d{2})$/;
if (re2.test(invoicedate)) {
invoicedate = invoicedate.replace(re2,"$1.$2.20$3");
}
var re4 = /^(\d{2})\.(\d{2})\.(\d{4})$/;
if (re4.test(invoicedate)) {
this.saveInvoiceDate(invoicedate);
this.displayInvoiceDate();
this.$el.find('[data-role="invoicedate"]').parent().toggleClass('has-error', false);
} else {
this.$el.find('[data-role="invoicedate"]').parent().toggleClass('has-error', true);
}
},
and bound it to the change event on the input. This worked fine, I now realize, because dd.mm.yy fits in the dd.mm.yyyy format, ie it does not contradict it.
Now the client wants to also be able to add ddmmyyyy as an entry option, but the datepicker autocorrects the form by replacing the newly entered date with the last known good one, or todays date, because ddmmyyyy does not match with dd.mm.yyyy, before the callback above gets called.
Is there any way to tell bootstrap-datepicker about multiple allowed formats?

You can pass functions to datepicker's format option. For really flexible parsing, I used moment.js.
$(".datepicker").datepicker({
format: {
toDisplay: function(date, format, language) {
return moment(date).format("MM/DD/YYYY");
},
toValue: function(date, format, language) {
return moment(date, ["DD.MM.YYYY", "DDMMYYYY"]).toDate();
}
}
});
From the bootstrap-datepicker docs:
toDisplay: function (date, format, language) to convert date object to string, that will be stored in input field
toValue: function (date, format, language) to convert string object to date, that will be used in date selection
You may have to play around with the moment() options, but you should be able to get it to where you want it. Check out momentjs's docs as well.

jQuery Date Formatting in Business Catalyst

I work with Business catalyst a lot, and would like to be able to format the dates as desired. Date output is as follows:
<span class="date">06-Feb-2014</span>
Currently using jQuery 1.10.2, and I can add jQuery UI if that's the way to go.
I have tried the following to no effect:
$(document).ready(function () {
$('span.date').each(function() {
var dateFormat = $(this).text()
var dateFormat = $.datepicker.formatDate('MM dd, yy', new Date(dateFormat));
//alert(dateFormat);
$(this).html(dateFormat + "<br>");
});
});
The site in question is http://www.doverfoursquare.org
Perhaps there is some sort of conflict with existing scripts?
Any help is GREATLY appreciated.

I know this is an old post but it doesn't seem answered...
I would use Liquid for this for example in an events module using a template:
{{date | date: "dddd"}}
and / or
{{date | date: "%d"}} {{date | date: "MMM"}}
should get you "Saturday 4 July"
You can use this resource to help with the modifiers / filters
http://docs.businesscatalyst.com/dev-assets/reference#!/liquid-reference/reference/filters.html!date-filters

When dealing with formatting dates I always see myself turn back to momentjs: http://momentjs.com/ . Its not the fastest framework but it will help you format your date in any desired way:
moment().format("DD-MMM-YYYY"); // "20-Feb-2014"

It works as intended here:
Note that datepicker is extension trough jQuery UI and as such you have to include it to work:
//code.jquery.com/ui/1.10.4/jquery-ui.js
Fiddle
Note that in example the var dateFormat is renamed, so to not re-declare existing.
$(document).ready(function () {
$('span.date').each(function() {
var value = $(this).text(),
date = $.datepicker.formatDate(
'MM dd, yy', new Date(value)
);
$(this).html(date + "<br>");
});
});
Or you could say:
$(this).html(
$.datepicker.formatDate(
'MM dd, yy', new Date($(this).text())
) + "<br>"
);
Edit in regards to date format:
Ref. ECMA
Format can be
YYYY-MM-DD
but not
DD-MM-YYYY
Also read this.
Errors:
Running you page, it show's this error:
Uncaught TypeError: Object [object Object] has no method 'player' (index):343
By source that would be:
$(document).ready(function() {
var settings = {
progressbarWidth: '200px',
progressbarHeight: '5px',
progressbarColor: '#22ccff',
progressbarBGColor: '#eeeeee',
defaultVolume: 0.8
};
$(".player").player(settings); // <<--- Error line
});
This is a possible source of halting the script at load or the like.
It also gives, (This could be some Facebook issue):
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
The:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
you can ignore as it is a jQuery "thing" and IE fix/hack.