How to format datetime with the datetimepicker plugin? - javascript

What I want is a format like this:
Thu , 13 March 2013 03:28pm
Here is what I've tried so far:
$('.datetimepicker').datepicker({
dateFormat : 'D , d M yy hh:mm'
});
This is the result I got:
Thu , 13 March 2013 hh:03
What can I do to get the desired format?

See this: Fiddle
Reference Link
$('.datetimepicker').datetimepicker();

I don't think you can achieve it since dateFormat is just for datepicker, you need to achieve it through timepicker as well. Here is a blog stated how you can obtain it:
http://trentrichardson.com/examples/timepicker/

Out of the box the jQuery UI datepicker does not provide the time as a possible format. See the documentation.

use the following code:
$('.datetimepicker').datepicker({
dateFormat: 'D , d M yy', timeFormat: 'hh:mm TT'
});
In it small m is represent the numeric month.
Above code will work for you.
For reference check this link.

Related

Format a "yyyy-mm-dd" date into "dd month yyyy"

I have a variable in my program that stores the date in the form of 2018-04-21. Now, how do I change the value into something like 21st April, 2018?
I need something like:
var date = stringifyTheDate(actual_date);
What should I include in the stringifyTheDate function to do that?
If you are using Moment.js this how you do it.
console.log(moment("2018-04-21").format("DD MMMM YYYY")); //prints 21 April, 2018
MomentJs is widely used library for date and time, if you are not using it then this is how you add it
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>

Jquery Datepicker Set Value From String

I am getting a string date from cookie which returns like this format 2017-11-16. My datepicker dateformat is D, M d, yy e.g Thu, Apr 27, 2017.
if I just set it as $("#m_checkin").datepicker().datepicker("setDate", "2017-11-16"); datepicker functions stop working and it just set 2017-11-16 as an input value. How can I format my date to my datepicker dateformat?
https://jsfiddle.net/n6dokkty/
You need to parse date before set date to particular format.
You can see here: https://jsfiddle.net/r1nm5h7k/
$( "#datepicker" ).datepicker({dateFormat: "DD, d MM, yy"});
$( "#datepicker" ).datepicker("setDate", $.datepicker.parseDate( "yy-mm-dd", "2017-11-16" ));
ref : https://api.jqueryui.com/datepicker/#utility-formatDate
You could look into momentjs, which is a javascript date/time library. With that, you can easily convert between dates of different format.
string newDate = moment(currentDate, currentFormatString).format(newFormatString)
You have to setDate with Date object instead of string (to avoid date format issues like you face currently).
So you have to change your code like below:
$("#m_checkin").datepicker().datepicker("setDate", new Date(2017,11,16));

Format date with Moment.js

I have a string in this format:
var testDate = "Fri Apr 12 2013 19:08:55 GMT-0500 (CDT)"
I would like to use Moment.js get it in this format mm/dd/yyyy : 04/12/2013 for display.
I tried to do it using this method,
moment(testDate,'mm/dd/yyyy');
Which errors and says there is no such method called replace? Am I approaching this in the wrong way?
Edit
I should also mention that I am using a pre-packaged version of Moment.js, packaged for Meteor.js
Object [object Date] has no method 'replace' : The Exact error from the console
Stack Trace:
at makeDateFromStringAndFormat (http://127.0.0.1:3000/packages/moment/lib/moment/moment.js?b4e3ac4a3d0794023a4410e7941c3e179398b5b0:539:29)
at moment (http://127.0.0.1:3000/packages/moment/lib/moment/moment.js?b4e3ac4a3d0794023a4410e7941c3e179398b5b0:652:24)
at populateProfileForEdit (http://127.0.0.1:3000/client/views/home/administration/directory/profiles/profiles.js?acfff908a6a099f37312f62892a22b40f82e5e0f:147:25)
at Object.Template.profile_personal.rendered (http://127.0.0.1:3000/client/views/home/administration/directory/profiles/profiles.js?acfff908a6a099f37312f62892a22b40f82e5e0f:130:13)
at Spark.createLandmark.rendered (http://127.0.0.1:3000/packages/templating/deftemplate.js?b622653d121262e50a80be772bf5b1e55ab33881:126:42)
at http://127.0.0.1:3000/packages/spark/spark.js?45c746f38023ceb80745f4b4280457e15f058bbc:384:32
at Array.forEach (native)
at Function._.each._.forEach (http://127.0.0.1:3000/packages/underscore/underscore.js?867d3653d53e9c7a171483edbcad9670e12288c7:79:11)
at http://127.0.0.1:3000/packages/spark/spark.js?45c746f38023ceb80745f4b4280457e15f058bbc:382:7
at _.extend.flush (http://127.0.0.1:3000/packages/deps/deps.js?9642a93ae1f8ffa8eb1c2475b198c764f183d693:231:11)
The 2nd argument to moment() is a parsing format rather than an display format.
For that, you want the .format() method:
moment(testDate).format('MM/DD/YYYY');
Also note that case does matter. For Month, Day of Month, and Year, the format should be uppercase.
Include moment.js and using the below code you can format your date
var formatDate= 1399919400000;
var responseDate = moment(formatDate).format('DD/MM/YYYY');
My output is "13/05/2014"
moment().format(); // "2019-08-12T17:52:17-05:00" (ISO 8601, no fractional seconds)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Monday, August 12th 2019, 5:52:00 pm"
moment().format("ddd, hA"); // "Mon, 5PM"
You Probably Don't Need Moment.js Anymore
Moment is great time manipulation library but it's considered as a legacy project, and the team is recommending to use other libraries.
date-fns is one of the best lightweight libraries, it's modular, so you can pick the functions you need and reduce bundle size (issue & statement).
Another common argument against using Moment in modern applications is its size. Moment doesn't work well with modern "tree shaking" algorithms, so it tends to increase the size of web application bundles.
import { format } from 'date-fns' // 21K (gzipped: 5.8K)
import moment from 'moment' // 292.3K (gzipped: 71.6K)
Format date with date-fns:
// moment.js
moment().format('MM/DD/YYYY');
// => "12/18/2020"
// date-fns
import { format } from 'date-fns'
format(new Date(), 'MM/dd/yyyy');
// => "12/18/2020"
More on cheat sheet with the list of functions which you can use to replace moment.js: You-Dont-Need-Momentjs
var moment = require('moment');
let yourdate = '2021-01-02T07:57:45.121Z'; // for example
moment(yourdate).format('MM/DD/YYYY');
// output : 01-02-2021
moment(yourdate).format('DD-MMM-YYYY');
// output : 01-Jan-2021
For fromating output date use format. Second moment argument is for parsing - however if you omit it then you testDate will cause deprecation warning
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format...
var testDate= "Fri Apr 12 2013 19:08:55 GMT-0500 (CDT)"
let s= moment(testDate).format('MM/DD/YYYY');
msg.innerText= s;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="msg"></div>
to omit this warning you should provide parsing format
var testDate= "Fri Apr 12 2013 19:08:55 GMT-0500 (CDT)"
let s= moment(testDate, 'ddd MMM D YYYY HH:mm:ss ZZ').format('MM/DD/YYYY');
console.log(s);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
You can pass "L" to format method, which handles internationalisation...
moment.locale('en-US');
moment().format("L");
> "06/23/2021"
moment.locale('fr');
moment().format("L");
> "23/06/2021"
Other long date formats (fr locale):
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'DD/MM/YYYY',
LL : 'D MMMM YYYY',
LLL : 'D MMMM YYYY HH:mm',
LLLL : 'dddd D MMMM YYYY HH:mm'
Docs: https://momentjs.com/docs/#/displaying/format/ (see "Localized formats")
To get the current UTC time in YYYY-MM-DD HH:MM:ss.Millisecond with timezone using moment format as below
moment().utc().format('Y-MM-DD HH:mm:ss.SSS Z').
Output
2022-09-20 15:28:39.446 +0000
May be this helps some one who are looking for multiple date formats one after the other by willingly or unexpectedly.
Please find the code:
I am using moment.js format function on a current date as (today is 29-06-2020)
var startDate = moment(new Date()).format('MM/DD/YY'); Result: 06/28/20
what happening is it retains only the year part :20 as "06/28/20", after If I run the statement :
new Date(startDate)
The result is "Mon Jun 28 1920 00:00:00 GMT+0530 (India Standard Time)",
Then, when I use another format on "06/28/20": startDate = moment(startDate ).format('MM-DD-YYYY'); Result: 06-28-1920, in google chrome and firefox browsers it gives correct date on second attempt as: 06-28-2020. But in IE it is having issues, from this I understood we can apply one dateformat on the given date, If we want second date format, it should be apply on the fresh date not on the first date format result.
And also observe that for first time applying 'MM-DD-YYYY' and next 'MM-DD-YY' is working in IE.
For clear understanding please find my question in the link:
Date went wrong when using Momentjs date format in IE 11

Format JavaScript (jQuery weekcalendar) date

I need to format a JavaScript date. I am using the jQuery Weekcalendar plugin and it kind of provides its own date format.
Input is:
Thu Jan 10 2013 11:15:00 GMT+0100 (CET)
Output should be:
2013-10-01 11:15:00
Can you help me to solve this?
moment.js helps a lot when dealing with time and date in JavaScript
moment().format('YYYY-MM-DD hh:mm:ss'); // for example: 2013-10-01 11:15:00
Update:
To use moment.js with your existing date object you need to create a wrapper
var myDateWrapper = moment(calEvent.start);
console.log(myDateWrapper.format('YYYY-MM-DD hh:mm:ss')) // that's what you want
Look here. You can format output using plugin.
https://github.com/themouette/jquery-week-calendar/wiki/Date-formating
Look also here:
https://github.com/themouette/jquery-week-calendar/wiki/Script-options
You need to use this options:
timeFormat: [string | default: “h:i a” ] – A format to use for times displayed by the calendar.
dateFormat: [string | default: “M d, Y” ] – A format to use for dates displayed in the calendar.
EDIT
$('#calendar').weekCalendar({
dateFormat: 'y.m.d',
timeFormat:"h:i:s"
});

Timeago + Localtime combined

I'm trying to combine timeago with datejs (with help of this to get format for local time)
for timeago I use the following:
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
For the localtime i use this:
jQuery(document).ready(function() {
$('.UTCTimestamp').localTimeFromUTC('MM/dd/yyyy hh:mm:ss');
});
How do I combine those two together? Right now I'm only able to use one at the time like this:
For Timeago:
<span class='UTCTimestamp'>2011-09-09 10:10:10</span>
and for localtime;
<abbr class='timeago' title='2011-09-09 10:10:10'>2011-09-09 10:10:10</abbr>
don't add any javascript code or jquery code except this;
$('.timeago').timeago();
and then add 'Z' (or including T). for more information go to this link
<abbr class='timeago' title='2011-09-09 10:10:10Z'></abbr>
http://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations
I am trying to do the same thing - here is what I finally figured out.
My HTML has this:
<abbr class="timeago localtime" title="#Model.GetLastUpdatedDateTimeISO8601(category, report)">#Model.GetLastUpdatedDateTimeRFC1123(category,report)</abbr><br />
I then have these 2 chunks of javascript:
$('.localtime').localTimeFromUTC('MM/dd/yyyy hh:mm:ss a');
$('.timeago').timeago();
This is using ASP.NET MVC Razor syntax in the HTML, but basically what that does is get the date/time strings in two different formats. All times are stored in UTC. The timeago plugin uses the ISO 8601 formatted string to do its magic, and the localtime 'plugin' uses the RCF1123 format.
ISO8601 looks like this: yyyy-MM-dd HH:mm:ssZ
RFC1123 looks like this: ddd, dd MMM yyyy HH:mm:ss GMT
The final result is that on-screen I see timeago's "about 10 minutes ago", but when I hover I get "10/26/2011 08:57:43 PM".

Categories

Resources