I am using vaadin-date-picker to display the date. It's default format is 6/21/2017. I want to show only month and year. Such as jun 2017 or 6/2017. Any help please?
vaadin-date-picker is using i18n property to localize everything. When declaring vaadin-date-picker element, you can also set i18n property. for Example:
<vaadin-date-picker i18n='[[i18nCustom]]'></vaadin-date-picker>
and then declare property:
i18nCustom: {
value: function() {
return {
week: 'viikko',
calendar: 'kalenteri',
clear: 'tyhjennä',
today: 'tänään',
cancel: 'peruuta',
firstDayOfWeek: 1,
monthNames: ['tammikuu','helmikuu','maaliskuu','huhtikuu','toukokuu','kesäkuu',
'heinäkuu','elokuu','syyskuu','lokakuu','marraskuu','joulukuu'],
weekdays: 'sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai'.split('_'),
weekdaysShort: ['su','ma','ti','ke','to','pe','la'],
formatDate: function(d) {
return [d.getMonth() + 1, d.getFullYear()].join('/');
},
parseDate: function(text) {
// This example produces a really strict parser which only accepts
// perfectly formatted dates like '12.8.2013'. Less strict implementation or
// a 3rd party parser like in the example below is recommended.
var parts = text.split('.');
if (parts.length === 3) {
var date = new Date(0, 0);
date.setFullYear(parseInt(parts[2]));
date.setMonth(parseInt(parts[1]) - 1);
date.setDate(parseInt(parts[0]));
return date;
}
},
formatTitle: function(monthName, fullYear) {
return monthName + ' ' + fullYear;
}
}
}
}
What you are looking for is function formatDate. Where you can edit what should be returned as displayed text
Related
I have a Grouped Bar chart in Apexchart with 3 sets of data. I would like to change the color of the 3 bars in the group if the Data 1:Month > the current month. Not sure if I'm going in the right direction here... or if there's a way to get rid of the Data 1 and incorporate the months into the function.
Example:
Data 1: Months: 1,2,3,4,5,6,7,8,9,10,11,12 (This Data set will be hidden)
Data 2: Dividend Amount: 10,30,35,45,55,30,40,30,25,40,60,45
Data 3: Expected Dividend: 15,20,25,25,45,20,30,20,15,20,20,35
x: Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec
JSFiddle
`
colors: [
function({
value,
seriesIndex,
dataPointIndex,
w
}) {
const currentMonth = new Date().getMonth() + 1;
let i = w.config.series[0].data[dataPointIndex].Month
if (i > currentMonth) {
return '#e9184b'
} else {
return '#689642'
}
}
],
`
I tried searching stack overflow and the web, looked at other peoples examples on codepen. I tried different variations using the function.
colors: [
function ({ value, seriesIndex, dataPointIndex, w }) {
if (dataPointIndex == Date.getMonth) {
return "#7E36AF";
} else {
return "#D9534F";
}
} ]
I have this code:
$(document).ready(function () {
/*var event_list = $('#event_list');*//*gil70l*/
//$(document).ready(function () {
//
$("#btnsearch").click(function () {
var res = $("#txtSearch").val();
res = res.substring(0,19);
date = moment(res, "DD/MM/YYYY HH:mm");
alert(date);
$("#calendar").fullCalendar('gotoDate', date);
$('.fc-day[data-date="' + date + '"]').css('background-color', "red");
//$('#calendar').find('.fc-day-number[data-date="' + date + '"]').css('background-color', '#FAA732');
})
but I cannot highlight the day on which I position myself with the function 'gotoDate'.
$('.fc-day[data-date="' + date + '"]'
...in here you'd need to put the date in yyyy-mm-dd format, as this would match what you see if you look at the generated fullCalendar HTML and see what's there already. Currently you're letting momentJS use its default string format output which would look something like
Wed Aug 25 2021 10:26:36 GMT+0100
I expect that
$('.fc-day[data-date="' + date.format("YYYY-MM-DD") + '"]'
will work better.
So I have a Apps Script that I has been working perfectly for moving files into the correct folder.
function organiseReceipts() {
var receiptFolder = DriveApp.getFolderById("XXXXXXXXXXXXXXXXXXXX");
var receipts = receiptFolder.getFiles();
while(receipts.hasNext()) {
var receipt = receipts.next();
var destination = createFolder(receipt, receiptFolder);
moveReceipt(receipt, destination, receiptFolder);
}
}
function moveReceipt(receipt, destination, source) {
destination.addFile(receipt);
source.removeFile(receipt);
}
function createFolder(receipt, parent) {
var createdDate = receipt.getDateCreated();
var folderName = constructFolderName(createdDate);
var matches = parent.getFoldersByName(folderName);
if (matches.hasNext()) {
return matches.next();
}
return parent.createFolder(folderName);
}
function constructFolderName(createdDate) {
var year = createdDate.getYear();
var month = createdDate.getMonth() + 1;
var name = "" + year + "" + padNumber(month);
return name;
}
function padNumber(number) {
if (number < 10) {
return "0" + number;
}
return number;
}
organiseReceipts is called once a day and moves files to a folder based on the metadata of the file. Files uploaded this year are ending up in incorrectly named folders as the year is coming out at 121.
So I have a file uploaded on Friday getCreatedDate() is returning Fri May 07 2021 13:18:02 GMT+0100 (British Summer Time) which is correct, but when I call getYear() on that I get 121 where I would expect 2021.
Am I doing something wrong? As I am not seeing what the issue is.
While Date.getYear() is deprecated, it is returning the expected value:
A number representing the year of the given date, according to local time, minus 1900.
For years greater than or equal to 2000, the value returned by getYear() is 100 or greater. For example, if the year is 2026, getYear() returns 126.
As others said, use Date.getFullYear() instead.
Date.getYear() was deprecated long ago. Use Date.getFullYear() instead.
In my view I wish to display a knockout.js binded field that contains a date. It is just a display field and not an input field. Something like below when basemodel.actionDate = ko.observable()
<p class="display-field" data-bind="text: baseModel.actionDate"/>
However this is displayed as follows:
2013-06-17T11:56:18.4537687Z
What is the easiest way to format this dd mm yyyy. eg: 17 June 2013?
I recommend the moment.js date formatting library.
Using it, you can do something like this in your view:
<p class="display-field" data-bind="text: moment(baseModel.actionDate()).format('LL')"/>
Either make sure the service output it in a correct format, or format in client side
If you want todo it client side then you can parse the ISO date string into a Date object and then use jQuery globalize to format it to desired format.
I use KO extenders for this
http://jsfiddle.net/vRf5B/42/
ko.extenders.date = function(target, format) {
return ko.computed({
read: function() {
var value = target();
if(typeof value === "string") {
value = new Date(value);
}
format = typeof format === "string" ? format: undefined;
value = Globalize.format(value, format);
return value;
},
write: target
});
}
update
I got a question on my blog how to retrieve the raw date value
It can be done my exposing the raw value on the computed like
http://jsfiddle.net/vRf5B/91/
Declare format function:
Date.prototype.toFormattedDate = function () {
var dd = this.getDate();
if (dd < 10) dd = '0' + dd;
var mm = this.getMonth() + 1;
if (mm < 10) mm = '0' + mm;
var yyyy = this.getFullYear();
/* change format here */
return String(mm + "/" + dd + "/" + yyyy);
};
And use it with the date strings as:
<span data-bind="text: new Date(TaxAuthority.RegDate).toFormattedDate()"></span>
I had some issues (I think) with the mapping plugin trying to use the extender. Since I'm only displaying dates and not allowing them to be edited I prefer to just use a binding handler like this:
Shipped on <span data-bind="date: shipDt"></span>
Here's the handler:
ko.bindingHandlers.date =
{
update: function (element, valueAccessor: () => any, allBindingsAccessor: any)
{
return ko.bindingHandlers.text.update(element, function ()
{
var value: any = ko.utils.unwrapObservable(valueAccessor());
if (value == null)
{
return null;
}
if (typeof value === "string")
{
value = new Date(value);
}
return value.toShortDateString();
}, allBindingsAccessor, null, null);
}
};
I chose to add a prototype to Date object like this (and call toShortDateString on the Date object created in the handler)- but you can replace the logic above with Globalize or whatever you prefer.
Date.prototype.toShortDateString = function ()
{
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};
If you are referencing moment.js then I would actually format in the knockout model.
var BiographicViewModel = function (person) {
this.FirstName = ko.observable(person.first_name);
this.LastName = ko.observable(person.last_name);
this.DOB = ko.observable(moment(person.birth_date).format("MM/DD/YYYY"));
this.Gender = ko.observable(person.gender);
this.Country = ko.observable(person.country);
this.City = ko.observable(person.city);
};
I am parsing a JSON object with JavaScript and displaying it in a styled HTML table.
The date variable comes as a long string. (e.g. 2011-11-23 10:21:49.695805)
How can I format the date so as to be displayed: year-month-day, hour-minute instead of 2011-11-23 10:21?
The AJAX call:
$$.ajax({
url: '/ajax/myfolder',
dataType:"json",
success: function(json) {
$$('#JsonGrid').append(CreateTableView(json, "jsonFeed", true)).fadeIn();
parseDate();
}
});
function parseDate() {
}
The json object:
[{"status": "success", "date": "2011-11-23 10:21:49.695805", "user": "xy", "jobname": "jobnamexyz"}]
You can use date functions, DateJS, etc., but if the format is fixed as in your example you can just take the first sixteen characters:
var date = json["date"].substr(0,16);
EDIT: sorry, just noticed you wanted a comma in there. So:
var date = json["date"].substr(0,10) + ", " + json["date"].substr(11,5);
EDIT 2: OK, try moving the call to parseDate() to before you call CreateTableView(), so you can "fix" the data before it is used. The following assumes the json is an array of objects:
success: function(json) {
parseDate(json);
$$('#JsonGrid').append(CreateTableView(json, "jsonFeed", true)).fadeIn();
function parseDate(data) {
for (var i=0; i<data.length; i++)
if (data[i]["date"])
data[i]["date"] = data[i]["date"].substr(0,10)
+ ", " + data[i]["date"].substr(11,5);
}
You can use String.match method to parse the parts of string like "2011-11-23 10:21:49.695805". For example the code
var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
"([T| ]([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
"(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
var dateString = "2011-11-23 10:21:49.695805";
var d = dateString.match(new RegExp(regexp));
will initialize d as array where d[1], d[3], d[5], d[7], d[8] and d[10] are year (2011), month (11), day (23), hour (10), minutes (21), seconds (49). The d[12] will be 695805 and only the first tree digits of it are milliseconds. So you can either create a Date like
var date = new Date(d[1],d[3],d[5],d[7],d[8],d[10],d[12].substr(0,3));
or display the parsed date as another string in any other format which you prefer.
$$.ajax({
url: '/ajax/myfolder',
dataType:"json",
success: function(json) {
$$('#JsonGrid').append(CreateTableView(json, "jsonFeed", true)).fadeIn();
parseDate(json);
}
});
function parseDate(json) {
var arr = json["date"].split(/:/);
var date = arr[0] + ":"+arr[1];
alert(date);
return date;
}
Maybe this jQuery extension can help you out: http://momentjs.com/
Like:
var now = moment();
var formatted = now.format('dddd, MMMM Do YYYY');