Hi we use a simple kendo datepicker for our web application.
$("#DateInput").kendoDatePicker({
format: "dd/MM/yyyy",
culture: "en-GB",
max: new Date()
});
Now when we try to get the datepicker value in Javascript my browser gives me date format dd/MM/yyyy but my colleague's browser gives him MM/dd/yyyy. We have tried to use same culture as you can see in kendo and as well as in our web.config we have put the globalization settings as follows.
<system.web>
<globalization uiCulture="en-GB" culture="en-GB" />
</system.web>
My computer's date format and settings are as follows;
Region & Language format: English(United Kinddom)
Keyboard Layout: English(United Kingdom)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+6
My colleague's date format and settings are;
Region & Language format: English(Australia)
Keyboard Layout: English(Australia)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+8
Last bit of information, we are using Chrome for testing on both places. It is probably the UTC problem. I want the date format in "dd/MM/yyyy" for both occasion. Any workable solution will be highly appreciated. Thanks.
Try to add this code at top of your page before you gonna render any kendo widget:
kendo.culture("en-GB");
It should forced kendo widgets to work in all location using en-GB culture.
If you're using ASP.MVC I recommend add it in "_Layout.cshtml" like:
<head>
...
<script src="#Url.Content("~/Scripts/jquery/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.all.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.pl-PL.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.en-GB.min.js")"></script>
<script src="#Url.Content("~/Kendo/js/cultures/kendo.culture.de-DE.min.js")"></script>
<script type="text/javascript">
kendo.culture("en-GB");
</script>
//widgets create scripts for your views if you write it here
</head>
Detail on globalization can be found on this link:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/globalization
If your intention is to convert the date into your desired format "dd/MM/yyyy" and if your kendo grid is not providing you the correct result in different places, create your own. Some thing like this.
In Json:
var FixedDateFormat = "PlodDate: '" + (Date.getUTCDate() + 1) + "/" + (Date.getUTCMonth() + 1) + "/" + Date.getUTCFullYear() + " 00:00:00";
Here I have added 1 on Date and Month cause getUTCDate/Month starts from 0. As you have said in comments you are accepting the date as string and then converting that back to DateTime so I've added the time " 00:00:00".
In MVC: You probably need to do something like following to convert;
DateTime X = Convert.ToDateTime(PlodDate);
UPDATE
I've got a better solution for you on JS. You are reading datepicker value with something like this, right??
$("#YourDatePickerName").data("kendoDatePicker").value()
Here you can tell your browser what local you want to use like the following
$("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-GB");
Which will generate exact same result for every culture.
Further Update
If you want to do it Kendo's way then you can use kendo.toString(). You can check it here.
Related
When I create a post, in the front matter I have to insert layout, title, date etc. My concern is regarding date front matter. It is very inconvenient to insert date time and time offset in date field manually.
I'm not able to figure out how to do this automatically. I want the front matter date to update automatically with system time.
The date variable in front matter is an optional variable that you can set to be able to override the date that you set when you title your post according what Jekyll is looking for (i.e. 2019-12-14-post-title.md). It should only refer to the date the post was originally made, and not the current system date. Except for certain edge cases, you really shouldn't have to define date in the front matter.
You can use Liquid templating to post the current time to a page by passing the "now" keyword to date in your liquid template as follows:
This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
to get the the output:
This page was last updated at 2019-12-14 17:48.
However this method has a big drawback for Jekyll usage, because it will refer to the current date when the page was last generated from the template and not when the page is being visited by the user.
The best way to access the current system time is likely to use javascript instead. This is fairly easy depending on your familiarity with the language, but essentially you can make a Date object and then output the info you are looking to display. Here is a quick snippet I made that shows a couple methods that act on the Date object to output different values such as the date, time, and year:
<!DOCTYPE html>
<html>
<body>
<h3>The toDateString() method converts a date to a date string:</h3>
<p id="demo1"></p>
<h3>The toLocaleTimeString() method outputs formatted time:</h3>
<p id="demo2"></p>
<h3>The getFullYear() method outputs the year:</h3>
<p id="demo3"></p>
<script>
// create date object
var d = new Date();
// use toDateString() to output formatted date
document.getElementById("demo1").innerHTML = d.toDateString();
// use toLocaleTimeString() to output formatted time
document.getElementById("demo2").innerHTML = d.toLocaleTimeString();
// use getFullYear() to output year
document.getElementById("demo3").innerHTML = d.getFullYear();
</script>
</body>
</html>
W3schools has a good rundown of the Date object and how to format output if you need more examples and reference on usage.
If you need to know how to use Javascript with Jekyll there is a helpful post on Jekyll Talk that will help.
First of all, you do not HAVE to insert 'layout, title, date etc'. You can use Front Matter defaults for them. This only makes sense for the layout as the title can or should be default, nor the date.
The date MUST be set in your filename and can be overridden in the Front Matter. Please note that this is ONLY true for the built-in collection posts. If you use a custom collection you do not need a date at all.
However, if you choose to use posts nevertheless and you want to add the date automatically, there is only one real option: Use a CMS that automates this input, like Forestry.io or CloudCannon.
I am using Datepicker for Bootstrap v1.6.4 in my asp.net mvc application.
This is my code to show the date:
HTML:
<div id="datepicker"></div>
JavaScript:
$input = $("#datepicker");
$input.datepicker({
format: 'dd MM yyyy'
});
$input.data('datepicker').hide = function () { };
$input.datepicker('show');
As I want to show full datepicker selection but in output it is showing me two datepickers.
OUTOUT:
Don't have any solution anywhere I have searched a lot and this behavior is also awkward don't know but this should ideally not happen but in my case, it is happening.
Any solution will be appreciated.
Thanks in advance.
I have a variable like this
var time = new Date();
How do I format it in angular-meteor into a relative time like one that shows up in facebook , twitter and other social apps like this "3 hrs ago", "1 month ago" and so on .
One option would be to use the Moment.js fromNow() function, which will display the relative time.
For example:
var time = new Date();
$('#timeFromNow').append(moment(time).fromNow());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<div id="timeFromNow">Time from now: </div>
Please note that there is an official Moment.js Meteor package on Atmosphere. If you want to install it, just run the following command:
meteor add momentjs:moment
Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>
I'm trying to set the format for a jquery datepicker element with the date format returned by Zend_Locale::getTranslationList('date', $locale);
My problem is zend returns the string 'dd/MM/yyyy' for the date format but jquery expects only 2 characters for the year ie 'dd/mm/yy', so it enters the year twice 20112011
Is there some option that can be passed to either zend or jquery to make them work in the same manner? I've read through the docs and can't seem to find anything
Many thanks for your help in advance!
I have used jquery date picker in python-django framework when I give date format as dd/mm/yyyy format it returns 20112011 then i have corrected it to dd/mm/yy and it returned 2011 only. you can specify in your datepicker css class to specify the date format as dd/mm/yy.
Iam not sure if this is what you're looking for but:
// use german local, change it to our needs :-)
$locale = new Zend_Locale('de_DE');
$result = Zend_Locale::getTranslationList('date', $locale);
// returns dd.MM.yy (german!)
echo $result['short'];