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.
Related
I'm using asp.net MVC TextBoxFor to bind bootstrap-datetimepicker. It's working fine with simple input type text box.
But when I'm binding it with mvc textbox helper it's showing wrong year like '31/10/1899 00:00'
Then I got the solution somewhere to fix that.
$('.datetimepicker').datetimepicker({
format: "dd-mm-yyyy hh:ii:00P",
autoclose: true
});
It's working fine, but now It's adding meridians at the very end like AM/PM. I need to remove those AM/PM.
Any help would be appreciated.
Simply remove the P at the end of your foramt variable see below
format: "dd-mm-yyyy hh:ii:00",
try this:
$('.datetimepicker').datetimepicker({
autoclose: true,
showMeridian:false
});
As two previous answers said, to remove meridian you can combine both format and showMeridian usage:
$('.datetimepicker').datetimepicker({
format: "dd-mm-yyyy hh:ii:00",
autoclose: true,
showMeridian: false
});
However, there is a glitch when datepicker lost its focus without selecting anything or making incomplete selections, it reverts date back to December 31, 1899 (reproduced in this example fiddle). I managed to check bootstrap-datetimepicker.js file and found parseDate function causing this behavior:
parseDate: function (date, format, language, type, timezone) {
var parts = date && date.toString().match(this.nonpunctuation) || [],
// this line below represents December 31, 1899 (try using console.log)
date = new Date(0, 0, 0, 0, 0, 0, 0),
// -- skipped for brevity --
val, filtered, part;
// -- skipped for brevity --
}
A little tweak is possible by changing date assignment into current date:
parseDate: function (date, format, language, type, timezone) {
var parts = date && date.toString().match(this.nonpunctuation) || [],
date = new Date(),
// -- skipped for brevity --
val, filtered, part;
// -- skipped for brevity --
}
Note: This tweak only available for non-CDN script (installed through NuGet package or manually placed in Scripts folder).
Related issues:
Issue #494: Date set to '31 Dec 1899 00:00' when focus lost without selecting date
Issue #153
I've a field and applying datepicker on it using jQuery.
it is currently getting time from system/browser.
I want it to get time from specific time zone e.g America/new_york.
The endDate param is the key to set the calendar, means user should not be able to select the date from future. Currently it is looking like this
The code snippet is :
jQuery('#convo_start_date').datepicker({
format: 'dd M yyyy',
endDate: '+0d',
autoclose: true,
showButtonPanel: true,
todayBtn: 'linked'
}).on('change', function () {
jQuery('.datepicker').hide();
jQuery('#convo_end_date').attr('value',jQuery('#convo_start_date').val());
});
Question: Is there any way to set the default specific timezone like America/new_york to do not allow the date from future (according to this specific timezone)?
Note: I've tried moment.js but it is conflicting with my current work in jQuery, Is there any params datepicker library providesvto set with timezone?
If you are using jquery ui datepicker plugin, you can set the maxDate option to current date so that user can't select date from future.
You will need to do the conversion to the specific timezone. You can change the targetTimeOffset variable as per your requirement.
var d = new Date();
var targetTimeOffset = -4*60; //desired time zone, taken as GMT-4
d.setMinutes(d.getMinutes() + d.getTimezoneOffset() + targetTimeOffset );
Check Fiddle: http://jsfiddle.net/mpsingh2003/8w8v9/3387/ if this is what you are looking for
You can use Joda-Time library to get your solution.
Check the classes they provide like org.joda.time.DateTimeZone.
You can get the DateTimeZone depending on the Canonical ID defined in the Joda Time.
Please check this link for API documentation.
Hope this will helpful for you. Thanks.
I am using a CMS that generates some code for me. I am having the CMS auto-generate the date a page was last updated. (Note: This page contains information that is time sensitive and it is beneficial for the end user to see when the page was last updated.)
The system generates the following time stamp: 24-May-2013 11:54 AM, however, I would prefer the date to look like so: May 24, 2013 (to follow the US Standard way of writing time) and drop the time completely.
The code looks like so:
<p>Last Updated: <span class="time">24-May-2013 11:54 AM</span></p>
I believe this would be possible using jQuery but I do not know how to do this. Any recommendations on how to use jQuery to do this would be welcome!
$(".time").each(function() {
var $this = $(this),
// regex to retrieve day, month and year
stamp = /([0-9]{1,2})-([a-z]*)-([0-9]{4})/i.exec($this.text())
$this.html(stamp[2] + " " + stamp[1] + ", " + stamp[3]);
});
See the jsfiddle for demo: http://jsfiddle.net/mifeng/gquhp/
If you have jQuery UI, you can use datepicker.
$(".time").val($.datepicker.formatDate('M dd yy', new Date()));
I'm using Timepicker (extended Datepicker from jQuery UI here).
My code:
$('.one').datepicker({
dateFormat: "d"
});
$('.two').timepicker({
timeFormat: "hh"
});
When I click on field .two, Firebug shows me an error:
Error parsing the date string: Unexpected literal at position 2
date string = 10
date format = mm/dd/yy
timepicker.js (line 1911)
Everything seems to work just fine, but I wonder why is this error showing up and how can I make it disappear?
EDIT:
Actually my code looks like this:
$('.one').datepicker({
dateFormat: "d m y"
});
$('.two').timepicker({
timeFormat: "hh mm"
});
EDIT2:
http://jsfiddle.net/r9bCk/
Gury,
Try to include the addon v.1.1.0 from here, and hopefully it resolves the error.
It's the same version I'm using.
Clearly there's a bug in the new versions.
The error is coming from the timepicker plugin itself.
It is there in the example link.
See $('#basic_example_2').timepicker(); after a selection.
Use a previous stable version as AsemRadhwi suggested
I would like to be able to convert a Java date format string, e.g. dd/MM/yyyy (07/06/2009) to a JavaScript date format string, e.g. dd/mm/yy (07/06/2009).
Has anyone done this before, or got any idea where I might find some code that already does this?
Edit:
Thanks for all the replies but now I realize my mistake and possibly why so many of you were struggling to understand the question; JavaScript doesn't have a built in date formatting ability. I am using the jQuery UI datepicker and I have been setting its date format, assuming it would be calling a standard JS function at some point, not using its own library! When I googled for formatting strings I jumped straight to the tables of what letters could be used, skipping the bit at the beginning explaining how to use the script.
Anyway I'll have to go ahead and possibly write my own I guess, converting a Java date format string into a jQuery date format string (or as close as possible) - I am working on the i18n of our product and have created a java class that stores the preferred date format string used throughout the application, my intention was to also have the ability to supply any jsps with the format string that is equivalent in JS.
Thanks anyway.
If you just need to pass a date from Java to JavaScript, the best way to do it, I think, would be to convert the Java date to milliseconds using date.getTime(), create a JavaScript date initialized with this milliseconds value with new Date(milliseconds)and then format the date with the means of the JavaScript Date object, like: date.toLocaleString().
You could use my plugin jquery-dateFormat.
// Text
$.format.date("2009-12-18 10:54:50.546", "dd/MM/yyyy");
// HTML Object
$.format.date($("#spanDate").text(), "dd/MM/yyyy");
// Scriptlet
$.format.date("<%=java.util.Date().toString()%>", "dd/MM/yyyy");
// JSON
var obj = ajaxRequest();
$.format.date(obj.date, "dd/MM/yyyy");
A similar topic has been answered here:
Converting dates in JavaScript
I personally have found this to be a rather large pain and took the author's suggestion and used a library. As noted, jQuery datepicker has one that is a viable solution if you can afford the overhead of download for your application or already using it.
Check out moment.js! It's "A lightweight javascript date library for parsing, manipulating, and formatting dates". It is a really powerful little library.
Here's an example...
var today = moment(new Date());
today.format("MMMM D, YYYY h:m A"); // outputs "April 11, 2012 2:32 PM"
// in one line...
moment().format("MMMM D, YYYY h:m A"); // outputs "April 11, 2012 2:32 PM"
Here's another example...
var a = moment([2012, 2, 12, 15, 25, 50, 125]);
a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Monday, March 12th 2012, 3:25:50 pm"
a.format("ddd, hA"); // "Mon, 3PM"
a.format("D/M/YYYY"); // "12/3/2012"
Also, its worth mentioning to checkout date.js. I think the two libraries complement each other.
This JavaScript library should be able to help you.
http://plugins.jquery.com/project/fIsForFormat
(I don't know why they have it as a jQuery Plugin, because it works standalone.)
You'd simply split the original formatted date into its individual elements and then create a new Date Object with those elements. Then, use this library's "Date.f()" method to output it into any format you could want.
For example:
var dateOld = "11/27/2010",
dateArr = date1.split("/"),
dateObj = new Date(dateArr[2], dateArr[0], dateArr[1]),
dateNew = dateObj.f("MMM d, yyyy");
document.write("Old Format: " + dateOld + "<br/>New Format: " + dateNew);
This works fine for me:
<%
Date date = Calendar.getInstance().getTime();
%>
<script>
var d = new Date(<%=date.getTime()%>);
alert(d);
</script>
I suggest you the MomentJS with this Plugin that allow you to convert a Java pattern to a JS pattern (MomentJS)
On Java Side
I recommend passing an Instant string which conforms to ISO 8601 standard.
import java.time.Instant;
class Main {
public static void main(String[] args) {
Instant instant = Instant.now();
// You can pass the following string to JavaScript
String strInstant = instant.toString();
System.out.println(strInstant);
// If the number of milliseconds from epoch is required
long millis = instant.toEpochMilli();
System.out.println(millis);
}
}
Output from a sample run:
2022-12-31T09:40:52.280726Z
1672479652280
ONLINE DEMO
Learn more about the modern Date-Time API from Trail: Date Time.
On JavaScript Side
Now, you can parse the ISO 8601 string on the JavaScript side simply by passing it as a parameter to Date constructor. You can also instantiate the Date object with the number of milliseconds from the epoch.
var date = new Date("2022-12-31T09:40:52.280726Z");
console.log(date.toISOString());
// Or if the number of milliseconds from epoch has been received
date = new Date(1672479652280);
console.log(date.toISOString());
The javascript code in this page implements some date functions and they "use the same format strings as the java.text.SimpleDateFormat class, with a few minor exceptions". It is not the very same as you want but it can be a good start point.
If you just want to format dates my date extensions will do that well - it also parses data formats and does a lot of date math/compares as well:
DP_DateExtensions Library
Not sure if it'll help, but I've found it invaluable in several projects.
If you are using java, take a look at the Simple Date Format class.