In the kendo calendar control, the months names in the months view(where all the months of a specific year are listed) are shown in the short form instead of the full name. How can i change the names to full form only in this view. Ex: Mar instead of March.
I tried changing the date format using 'calendar.options.format' property, but it dosen't make any difference. Need help.
The calendar widget is programmed to always use the month abbreviation names. However, you can edit these names in the Kendo culture settings. Just be aware that they will change anywhere in Kendo that uses month abbreviations.
The abbreviations are stored in:
kendo.cultures.current.calendars.standard.months.namesAbbr
which is an array, indexed by the month. So you could set:
kendo.cultures.current.calendars.standard.months.namesAbbr[0] = "January";
kendo.cultures.current.calendars.standard.months.namesAbbr[1] = "February";
// ...etc...
Or, to make things easier, you can just copy the entire un-abbreviated months array to the abbreviated array, instead of setting each individual month:
kendo.cultures.current.calendars.standard.months.namesAbbr = kendo.cultures.current.calendars.standard.months.names;
However, that is still going to affect any other Kendo widgets that rely on the month abbreviations. A cleaner approach would be to make a custom culture for the Calendars to use. So in the initialization script for your page, after you include kendo.min.js, you can do this:
// just do this once on page load. copy current culture to a new one, and replace abbreviated months.
kendo.cultures.currentWithoutMonthAbbreviations = $.extend(true, {}, kendo.cultures.current);
kendo.cultures.currentWithoutMonthAbbreviations.name = "currentWithoutMonthAbbreviations";
kendo.cultures.currentWithoutMonthAbbreviations.calendars.standard.months.namesAbbr = kendo.cultures.currentWithoutMonthAbbreviations.calendars.standard.months.names;
Then the calendar widgets that you want to use full month names in, you can tell it to use your custom culture.
$("#datePicker").kendoDatePicker({
culture: "currentWithoutMonthAbbreviations"
});
You can do it with this script for days. I imagine the same would work for months:
var dayInfo = kendo.culture().calendar.days;
for (var i = 0; i < dayInfo.namesAbbr.length; i++) {
dayInfo.namesShort[i] = dayInfo.namesAbbr[i];
}
Related
I'm trying to do the following task:
Say that we have a dropdown (Dropdown1) that includes the options {year, month, week, day}. We also have Dropdown2, that changes according to what is chosen in Dropdown1.
So if user chooses 'year', Dropdown2 will have the years {2013,2014,2015}. If user chooses 'month', Dropdown2 will have all the months from 2013 to today {Jan 2013,Feb 2013...Jan 2015} and same goes for the days. I've managed to do this only for the 'year' case..
I do not want to use Datepicker, I just want to do this simply and efficiently.
Here's how it should look:
You can add an ng-change directive to your resolution list, and call a method to generate values used for the period list.
See: https://docs.angularjs.org/api/ng/directive/ngChange
--
Another option would be to generate all 4 period lists ahead of time:
$scope.periodLists = {
year: [...list of years...],
month: [...list of month+years...],
week: [...],
day: [...]
};
Then your periods dropdown list ng-model would be bound using the option from the resolution list. Something like:
ng-model="periodList[selectedResolution]"
When user picks a different resolution, the second list switches to periodList[year] or periodList[month] ...
Is there a way to conditionally add "empty" rows to a ui-grid model? The requirements for my project stipulate that we display items by date (very easy), but also display empty rows for days that don't have items on them so that users can see those gaps at a glance (much more difficult).
Somewhat in line with what was being asked in this question, perhaps some sort of grouping by date and inserting an empty group for dates that don't have associated items could work...?
I could create a whole new collection model that combines dates and my actual data and have the ui-grid use that, but that seems extremely inelegant, as it would likely entail a lot of manual reloading of everything when changes are made to the data. Ideally I'd like to just feed my collection of data rows to the grid, but still have it show an extra row with just the date field for dates that don't currently have items.
I actually have this working in a setup using tables and ng-repeat now, but I'm looking to switch to ui-grid or similar to gain benefits of virtual scrolling, etc since I have a lot of editable (and hence, fully-bound) data.
Thanks in advance...
Would something like this meet your needs?
function fillInEmptyDates(startDate, endDate, data) {
var dateToCheck = moment(startDate);
var end = moment(endDate);
var finished = false;
while (!finished) {
if (!Enumerable.from(data).any(function (x) { return dateToCheck.diff(x.YourEntityDateField, 'days') === 0; })) {
var newEntity = { "YourEntityDateField": dateToCheck.clone().toDate() };
data.unshift(newEntity);
};
dateToCheck.add(1, 'days');
if (dateToCheck.diff(end, 'days') === 0) {
finished = true;
}
}
}
To be called like...
fillInEmptyDates(new Date(2014, 6, 30), new Date(2014, 10, 25), $scope.gridOptions.data);
You could perhaps have the first date as the minimum of your current data, and the end date as the max, or adjust according to your needs.
Note that I have used MomentJS for date manipulation and LinqJS for looking through the dates for the data. I'm sure there would be an easy way to loop through the data without using LinqJS if you preferred. (I'm new to JavaScript and find myself hooked on the LINQ stuff I was previously doing in C#.)
The sorting that you specify in the grid options should apply to the newly created rows.
(Sidenote: you might have to play with timezones to get exactly the values you want. If you're seeing duplicates of the dates that do have data, then it may be due to this.)
I am unable to access the store elements returned from my store. When I console.log(me.proxy.read(operation)) and expand/navigate in the console I see all of my elements. There are 1000 rows. I am using the same store for a grid and have the pageSize set to 50. Even though I can see 1000 rows when i do a console.log(me.proxy.read(operation.resultSet.records[51])) i get an undefined message. So, it appears that for some reason the number of elements I can access is only 50 as that is what my pageSize is set to.
Long story short, I am using the same store for two scenarios. I want to have paging in my grid that will show 50 rows on each page. However, I want to loop through the entire store and load an array of all 1000 rows. The reason why I want an array of all 1000 is becasue I am going to use a date field in the rows to populate my date picker from an array. I am going to disable the dates in my grid and have the datepicker display only the dates that are in my grid.
I tried to include a screen shot but I am not allowed because i am only a 3 on the reputation system.
var operation = new Ext.data.Operation({action: 'read', start: 0, limit: 1000});
var proxy = new Ext.data.proxy.Ajax({ url: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent'});
me.proxy.read(operation);
console.log(me.proxy.read(operation));
HERE IS UPDATED CODE:
I have this in my controller:
ondatesStoreLoad: function(me,records,success)
{
var s = this.getStore('dates');
for (i = 0; i < s.getCount(); i++) {
MESSAGE_ID = s.getAt(i).get('message_id');
RECIP_EMAIL = s.getAt(i).get('recip_email');
UNIX_TIME_STAMP = s.getAt(i).get('unix_time_stamp')
console.log(i,MESSAGE_ID, RECIP_EMAIL, UNIX_TIME_STAMP);
};}
This puts out all 1,000 of my records to the console but I am not sure how to put them in an array that I can use in my datepicker component. When ever i try to get the store in the datepicker it is always undefined. I suppose it is becasue the store hasn't loaded yet so there is nothing there. Not sure how to get around that. Perhaps a callback handler?
HERE IS ANOTHER UPDATE:
I added a callback in my store.load:
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);}
})
That took forever to figure out but now I can access all my records and have a smaller problem to work on. At the moment i just have one element hardcoded to do a quick test.
Where do I need to put the code to get it into my date picker disableDates config? I need to put the dates into an array but for quick testing I used minDate: just to see if i could see something work but it shows up as undefined. Now i have the code in a beforrender listener but that seemingly needs to be in some other place or maybe some handler for my date picker....? is there an onload for the datepicker or something i shoudl use for this??
Why not just change the datepicker directly from that ondatesStoreLoad function? Before the loop, disable all dates in the datepicker. Then during the loop, instead of the console.log call, enable the date that was found in that record.
In theory, that should work. However, looking at the docs for Ext, I don't see a way to disable all dates, or to enable a date. You can only set which dates are disabled. But the general idea of updating the datepicker in that ondatesStoreLoad call is still what you should do.
You might need to extend the datepicker class, and add some custom methods to it to be able to enable a specific day.
I'm using the CakeTime class for my localization of dates & times.
For dates it works like I want it to:
$timestring = $this->Time->format('Y-m-d H:i:s', time());
echo 'DateTime: '.$this->Time->i18nFormat($timestring);
// Result => DateTime: 11/08/2013
I want it to also display the time.
For example in the US they use AM/PM and in other places they use the 24 hour notation.
I've looked but can't seem to find a way to do this.
Any idea's?
Edit*
To be clear, the localization works perfectly for the dates(have the LC_TIME files), but the i18nFormat function only returns the date, and from what i saw, passing a format will use that format, not the localized one, example MM/DD/YYYY vs DD.MM.YYYY in a different locale
*Edit2:
The solution vicocamacho gave in the comments is the correct one
So to get the Date + Time in the localized form:
$this->Time->i18nFormat(time(), '%x %X') does the trick!
You can use the TimeHelper::i18nFormat method. You also can check this repo to find common date/time translations https://github.com/cakephp/localized be sure to store them in the APP/locale/<locale>/LC_TIMEdirectory
I am using date picker of extjs 4.
I need to enable only three dates and
to disable everything else. How
do I do it ?
I would suggest starting with the API docs for Ext.menu.DatePicker, which I assume that you are doing.
However, if there are only a total of three static dates ever available, why not use something besides a date picker for the task?
If you are picking from a set of dates that could be stored in an array, I'd suggest reading this Sencha forum post about using DateField along with an array that disables all dates other than those specified in an array as follows:
dateArray = ["06/17/2007", "06/01/2007", "05/17/2007", "05/01/2007"];
dateField = new Ext.form.DateField({
format: "m/d/Y",
disabledDates: ["^(?!" + dateArray.join("|") + ").*$"],
disabledDatesText: "Date not available."
});