I want to add support for the General Date Time Format to jQuery Globalize as it's the default format for outputting a DateTime as a string in .NET.
How can I extend an existing culture and add a new calendar pattern? The GitHub page documents the addCultureInfo function but I've been able to get this working with such a deep path:
calendars > standard > patterns.
It took me a while to fiddle with it in the console of the browser, but here it is. Note, the addition is not within the calendars > standard > patterns.
Globalize.addCultureInfo("en-US", {
calendar: {
patterns: {
X: 'ddd MMM dd yy'
}
} });
Related
I want to take two date string with textbox or editor in mvc.
The format should be
"MM/yyyy-MM/yyyy".
I need to force the user for entering the input like above format without posting model.
#Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { #class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })
Above code not working event get just a formatted date string.
The format is working as expected. You are telling tbxDateRange's value (the zero in the third parameter ("{0:dd/MM/yyyy}") to format as day/month/year. It will therefore take the input in the text box and display it in that format.
It is only a display format. It will not enforce this format. For that you will need to do your own client side javascript (since you mentioned without posting the model). You could look at using a masked input element. ASP.NET MVC does not have a masked input out of the box.
You could use a masked input control like maskedinput which is a plugin for jQuery.
Additionally, you might want to look at breaking this up into two controls. One for the start and one for the end. You could consider using the html5 input type of date and you will automatically get a calendar. Although, if the day of the month will be too confusing for your users/UI then you could look at using jquery UI's datepicker and you can configure it to show only month and year.
Once you include jQuery UI in your app you would do something like jQuery UI DatePicker to show month year only.
In that example the winning answer formats the control in such a way to only show the month and year items of the control.
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
Hey ho =)
I wanted to create a Weather Plugin for my Website. So i choose the simpleWeather Plugin.
The simpleWeather Plugin used the moment.js lib to get the last updated time. But the Plugin itself not provide a language option.
My standard location is "Kiel, Germany".
But it's not working and says "Invalid Date".
I have no idea, why!
Can someone help me, please?
/* Does your browser support geolocation? */
if ("geolocation" in navigator) {
$('.js-geolocation').show();
} else {
$('.js-geolocation').hide();
}
/* Where in the world are you? */
$('.js-geolocation').on('click', function() {
navigator.geolocation.getCurrentPosition(function(position) {
getWeather(position.coords.latitude+','+position.coords.longitude); //load weather using your lat/lng coordinates
});
});
$(document).ready(function() {
getWeather('Kiel',''); //#params location, woeid //Get the initial weather.
});
function getWeather(location, woeid) {
$.simpleWeather({
//20065908 KIEL woeid
location: location,
woeid: woeid,
unit: 'c',
success: function(weather) {
html = '<ul>Today: <i class="icon-'+weather.code+'"></i><br />';
html += '<li>'+weather.temp+'°'+weather.units.temp+'</li>';
html += '<li>'+weather.city+', '+weather.region+'</li></ul>';
//Don't forget to include the moment.js plugin.
var timestamp = moment(weather.updated);
html += '<p>Weather updated '+moment(timestamp).fromNow()+'</p>';
html += '<p>Weather updated at '+moment(timestamp).format('MM/DD/YY h:mma')+'</p>';
for(var i=0;i<weather.forecast.length;i++) {
html += ''+weather.forecast[i].day+': <i class="icon-'+weather.forecast[i].code+ '"></i>';
}
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
}
codepen
I don't know how exactly the geolocation works... but I think that moment.js use the geolocation to set a language.
So I tried to set the moment.js locale globaly to 'en', but it's also not working how I expected.
The problem is that Yahoo Weather (simpleWeather's data source) does not follow its own standard for date formatting... The weather.updated date in the response looks like this: Tue, 20 Oct 2015 3:58 pm CEST. This is not a standard date format, thus Moment.js cannot parse is correctly (because there are some not unique time zone abbreviations, e.g. CST).
A quote from Yahoo Dev documentation:
pubDate: The date and time this forecast was posted, in the
date format defined by RFC822 Section 5, for example Mon, 25 Sep
17:25:18 -0700.
Clearly, this is not the case. Moment.js would happily parse RFC822 formatted date. Yahoo should fix this issue.
However if you really want to use this feature and you have a fixed location, there is a way to parse the local date from Yahoo by changing this line:
var timestamp = moment(weather.updated);
to this:
var timestamp = moment(weather.updated, "ddd, DD MMM YYYY HH:mm A");
And correct this date considering the visitor's time zone.
I am developing android app using jquery mobile. i want to change default date format for input type = "date". how can do this?. one more thing from where the date picker is loading?
anyone help ?
eg:-
it is displaying date in following format by default: "mm/dd/yy". but i need to set this date format dynamically. How can i do this?
set
input_type = TYPE_DATETIME_VARIATION_DATE
in your android.text field. this allows entering only a date.
you can parse it in your java script by doing this :
DateFormat df = new SimpleDateFormat("EEE, dd MMM yyyy", Locale.getDefault());
I am using two ric:calendar one for start date and another for end date.
the end date should disable all the previous dates automatically based on the start date selection.
Can it be possible using dayDisableClass?
Regadring the disabledDay way...
take a look at this post: Disable days on rich:Calendar
Also you can use the calendar CalendarDataModel -> CalendarDataModelItem -> isEnabled()
Boolean isEnabled() returns "true" if date is "selectable" on the calendar, the default implementation returns "true"
take a look at the Demo
You could use calendar's attribute dayDisableFunction and define your JavaScript function which would define which days are disabled:
<rich:calendar dayDisableFunction="disablementFunction" ...</rich:calendar>
example JS function:
function disablementFunction(day) {
if (day.isWeekend) return false;
return true;
}
I want to programmatically set date for the input with datebox control, For this i know i can use something like this
$(element).trigger('datebox', {'method':'set', 'value':'dateString'});
but this doesn't seem to update the control(i.e when i open the calendar, it is set to current date and not equal to the value in the input field)
EDIT:
based on JTsage's pointers i overwrote the default dateformat to mm/dd/yyyy, using sth like this.
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
'en': {
dateFormat: '%m/%d/%Y'
}
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useLang: 'en'
});
Then i tried setting the date using sth like this
$(element).trigger('datebox', {'method':'set', value:'07/02/2012'});
but this date is not appearing when i navigate to the page..Interestingly when i tried updating the date from firebug console(being on that page) it updated the field as well as datebox control.
I have no idea why this is happening..Need help, please respond JT
So finally i fixed the issue, by doing this
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%m-%d-%Y',
'overrideHeaderFormat': '%m-%d-%Y'
});
setting the value of the input field explicitly
$(element).val('06-21-2012');
and then refreshing the datebox
$(element).trigger('datebox', {'method':'set', 'value':'06-21-2012'});
I found th solution, try this
$(element).trigger('datebox', { 'method': 'doset' });