I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:
I'm using V5 in conjuction with moment.js.
Searching through the docs, I ended up here: https://fullcalendar.io/docs/v5/day-header-render-hooks
This is the code I've tried when initialising the calendar:
dayHeaderFormat: function(date){
return moment(date.weekday).format('ddd');
}
This results in showing today (Thu) for every header, rather than the correct days.
My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.
Any help or advice appreciated!
dayHeaderContent: (args) => {
return moment(args.date).format('ddd Do')
}
The new function supplies args instead of date object. So you access them with args.date and then format using moment
Related
Ngx Bootstrap Datepicker returns a JS Date object.
I have a custom Time picker that returns a string formatted as HH:mm.
What I need to do right now is to create a JS Date object with the selected Date, selected Time and a specific TimeZone.
I'm trying to use moment (cause we use that for dates in the whole application) but I'm having not expected behaviours.
I'm trying to:
const specificMoment = moment.tz(date, timeZone); // date is the Ngx Bootstrap selected date
specificMoment.set('hour', +time.split(':')[0]); // time is HH:mm string
specificMoment.set('minute', +time.split(':')[1]);
return specificMoment.toDate
*timeZone changes according to the user, not due to it's browser, it's an attribute of the user, so I can't set moment.tz.setDefault(...);.
What I'm facing is that .toDate is returning my current timeZone, event though it appears my different timeZone inside the moment object.
Why is it working like this and what would be a working implementation for what I need?
Ps: console.log(specificMoment.format()); returns wrong timeZone as well 2018-12-20T23:00:30-02:00.
EDIT
Turns out using const specificMoment = moment(date).tz(timeZone); and then return specificMoment.toDate() "works". It returns a Date object with 2018-12-21T05:00:00.323-0200, which is the date with specified timezone (GMT -8:00) but displayed on my current timezone (GMT -2:00).
The data is stored on my DB correctly.
Can someone explain why?
Thx.
It looks like you haven't setup moment-timezone with any data about the timezone to use.
Check out this link on Data Loading in momentjs.
I've created a JS Bin for your example that shows how to use Data Loading. Check it out here.
e.g.
moment.tz.add([
'America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0',
'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);
I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.
Using JSON, I was able to successfully loop through a directory and display the files with path and date. However, I'm not sure how to change the output. I'd like to just display Month and Year instead of Day Month Day Year.
$.getJSON( "http://www.houston.org/api/v1/forms/dir", function( data ) {
data.forEach(function(o,i){
$('#arChives').append('<div>'+ new Date(o.Created).toDateString()+'</div>');
});
});
<div id="arChives"></div>
See my jsfiddle sample
In addition to this question (not sure if I was supposed to ask this question separately), I'd like to capture the files creation date OR date last modified. As is, as I add new docs to the /dir/ folder, the date associated with each file is ultimately rendering the same... even though the last modified date is clearly from January. How do I accurately capture and render the files created date or last modified date?
Any help would be greatly appreciated!
You can use momentJS to format the date :
moment(Date(o.Created)).format('DD/MM/YYYY')
JsFiddle
how can i remove the time from the date when shown on the highchart.the data (dates) are received from a twitter get request and saved into an array.
for (var i in array) {
dateArray.push(array[i].date);
}
highchart(dateArray);
an example of date shown on the graph: Sat,04 Aug 2012 19:35:02 +0000
The way I see it you have two options:
Only pass in the day value of the time for your categories. Involves processing on the backend.
Pull your data as-is and convert to Javascript time format, make your xAxis datetime type, set up your tickInterval to be one day, and run your chart.
Without know what your data looks like, what you are plotting on the yAxis, or what your expected outcome is it is really hard to say.
I recommend to go with option #2 because this is time based data.
EDIT: Based on your comments
You can first convert the string to a date object, and then format the date object to your liking using SimpleDateFormat.
SimpleDateFormat format = new SimpleDateFormat("EEE, MMM d yyyy");
String formattedDate = format.format(new Date(array[i].date));
dateArray.push(formattedDate);
You can find various date formats # http://blog.stevenlevithan.com/archives/date-time-format
I am using one jquery date picker,
with using picker i am getting date in like this format
Friday, May 21, 2010
Now i want to add one day in this date so i think, i can only do if i change the date in exact format like
21/5/2010
I want to only convert that bcz i want to add one day to the particular date.
So what do u suggest me? How can I do that?
Can i do without converting it ?
thanks in advance....
Take a look at http://docs.jquery.com/UI/Datepicker#option-dateFormat
datejs may be useful to you.
In addition to the formatting options given by others, you should add using date objects rather than to the string representation of the date object.
I.E.
// add 5 days to today
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
I think you need to detail what jQuery plugin do you use.
Is it this one? http://jqueryui.com/demos/datepicker/
If so, then when you cann getDate method, you'll get Date object representing a date. You can easily manipulate it.
The date format has nothing to do with how dates are stored; it only affects the way dates are displayed. JavaScript has a native Date object and jQuery UI's Datepicker allows to access such object:
http://jqueryui.com/demos/datepicker/#method-getDate
Once you have a Date object, you can alter it to suit your needs:
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date
Finally, you can feed it back into Datepicker:
http://jqueryui.com/demos/datepicker/#method-setDate