ExtJS - Elegant Date Time Picker - extjs

I've found what I'm looking for but it's a jQuery example, it looks super clean and intuitive. Is there a way to do this with xtype 'datefield'? Is there a way to extend this field type to include a clock icon beside the date icon and have it behave the same way as in this example?
http://jsfiddle.net/rniemeyer/T3zge/
ko.kendo.bindingFactory.createBinding({
name: "kendoDateTimePicker",
defaultOption: "value",
events: {
change: "value",
open:
{
writeTo: "isOpen",
value: true
},
close: {
writeTo: "isOpen",
value: false
}
},
watch: {
enabled: "enable",
max: "max",
min: "min",
value: "value",
isOpen: ["open", "close"]
}
});
var viewModel = {
myDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);
I'm still very much a newbie at this so perhaps somebody can lend some advice or point me in the right direction how I can figure this out. Thanks in advance! :)

I have created a DateTime plugin for ExtJS 4 and 5 few months ago.
Give it a try, its a little different than what you showed but works as intended:
https://github.com/gportela85/DateTimeField
Hope it helps

Extjs does have a separate Time Picker, but not a date/time picker combined. You would likely need to create a plugin, but if you are fairly new to this you may find it a little overwhelming.
You could search the forums for custom extensions/plugins people have created, I just came across this one for ExtJs 4.

Related

Deleting item from Array once handled by a List in SwiftUI

I'm convinced I'm overthinking this and ending up in a loop of not being able to solve this issue. The short of it is I have an array which includes dates which I am displaying in a list in my main view. The entries will fire notifications to users based on the time of the date.
I want to be able to remove entries from the Array or View where the date is older than the current date and only show users the up to date entries. Almost everything I've found online doesn't seem to apply to this and I'm going round in circles trying to resolve this.
Theres a lot to unpack with my code so I've condensed it down.
struct EventListView: View {
var body: some View {
NavigationView {
//Loads the array from a CSV - no issues with this, been working with it for
all other functions in the app.
var events = loadCSV(from: "Eventtest")
List(events, id: \.id) { event in
//This function returns a true/false bool which I want to use to remove
from view/array
let eventinpast = dateInPast(value: event.date)
HStack{
VStack(alignment: .leading, spacing: 5){
Text(event.name)
.font(.subheadline)
.foregroundColor(.secondary)
Text(event.event) //confusing but this is correct.
.font(.subheadline)
.foregroundColor(.secondary)
Text(event.date)
Text(event.time)
}.frame(width: 200.0, alignment: .topLeading)
}
}
}
}
}
I've tried to change the List to include a "ForEach" but this doesn't resolve the issue as everything I've found online for this revolves around a user action to delete/remove, but I want the bool to decide if the event item is displayed/deleted or not.
I've removed my attempts for trying to delete/remove items because at this point I'm tripping myself up constantly and I'm not convinced I'm looking at the problem from the right perspective.
Most recent attempt has been following this: https://www.hackingwithswift.com/books/ios-swiftui/building-a-list-we-can-delete-from
But instead of using .onDelete I tried .onAppear but no deals. Sorry if proposing this problem is rambling, I'm quite drained from trying to get what I thought would be really simple functionality working.
Any help would be greatly appreciated! Thank you.
Sometimes it is better to do the model stuff first.
var events = loadCSV(from: "Eventtest")
events = events.filter() { !dateInPast(value: $0.date) }
how about SHOWING only the relevant events:
var events = loadCSV(from: "Eventtest").filter { !dateInPast(value: $0.date) }
or
List(events.filter { !dateInPast(value: $0.date) }, id: \.id) { event in
Thanks so much #dtm & #ChrisR!
I knew I was overthinking what I was trying to do. I've ended up with this.
var events = loadCSV(from: "Eventtest")
var events = events.filter { !dateInPast(value: $0.date) }
There are some other date eval's in scope for the view but that can be moved into the loadCSV function or dateInPast, tidies it up a bit too. Unfortunately I can't upvote since my account is new. Thanks so much though. Cheers!

Angular advanced searchbox lose focus after selecting suggested key-value per keyboard

I've implemented the angular-advanced-searchbox (with AngularJS 1.5.8, ui-bootstrap, JQuery) like the demo-page:
html
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
script
$scope.availableSearchParams = [
{...},
{
key: "city",
name: "City",
placeholder: "City...",
restrictToSuggestedValues: true,
suggestedValues: ['Berlin', 'London', 'Paris'] },
{...}
];
};
Here is a Plunker of this implementation too. I'll refer to this example to picture my problem.
If I type 'city' in the searchfield and select it by hitting enter, then I'll see the suggested Value-List (Berlin, London, Paris) for about a second and then the focus 'll lost and the selected key-value (city) is automatically removed. It seems this won't happen, if the mouse pointer is rested over the search-input field (without any action).
With this issue, I can't use this module on my site - but I really want to :) Are any suggestions out there?
OK, this (low-level) fix worked for me - i've just commented line 107 ():
angular-advanced-searchbox-tpls.js [#107]
$scope.searchQueryChanged = function (query) {
// updateModel('change', 'query', 0, query);
};
This line is used to build 'pre-queries'. If you start typing 'city', the scope of searchParams generate a temporary query on the fly and would be changed to the selected key - g.E.:
{"query":"ci"}
This will then lead to a timeout after 'city' is selected. I don't know this 'query' is used for - all things 'll do their job furthermore. But by time I'll looking to a real fix for this problem :)

HighCharts timezone issues on AngularJs

I have simple chart with x-axis lables and tooltips,
the date of the months on the tooltips are correct while the months on the x-axis labels is one month behind.
when i change the time zone from GMT+2 US East to UTC-5 the issue resolved.
i also added the following global options useUTC, but it has no affect.
you can see the GMT+2 results in JSFiddle, when you change your timezone, to utc it will resolved.
Highcharts.setOptions({
global: {
useUTC: true
}
});
Any help will be appreciated. (http://jsfiddle.net/liad/uVZ4Z/)
I use highcharts, angularjs and highcharts-ng.
I added the following options (it works for me):
Highcharts.setOptions({
global : {
useUTC : true,
timezoneOffset: -2 * 60 //GMT +2
}
});
Honestly, I don't know how to set global options in highcharts-ng. Is that enough:
$scope.chartConfig = {
global: {
useUTC: true
},
Anyway, I'm in UTC+2h and I see chart properly, Apr for first column (and the same in a tooltip).
It seems this option is not developed at this moment. So have to use Highcharts object directly.
For example, put that code in any of your Angular's config section:
Highcharts.setOptions({
global: {
useUTC: true
}
});

Elasticsearch filter on aggregation

Since I couldn't find anything on Google:
Is it possible to filter on an aggregation in elasticsearch. Im thinking of someting like: Get all objects where SUM(obect.X) > 100.
Thanks in advance.
EDIT - Sample Data
I have the following document-structure:
{
docKey : 1
value: 2
},
{
docKey: 1
value: 5
},
{
docKey:1
value: 7
},
{
docKey:2
value:2
},...
I now want to query the docKey from the database where the sum of the value is bigger than X.
EDIT2
I found out that is something I have to do in my application logic.
you can see it here
This doesn't exactly answer your question but seeing as you were pretty vague i.e. posting no mapping, query or anything of that matter we can't help you. However I hope you'll be able to work it out for yourself with this fantastic article on aggregations. Best of luck.
Update - Maybe this is what you're looking for instead?

DatePickerand Translation

I have a date picker (default one) on which I need to translate the Month column to any other language.
I have not been able to access those fields yet and can't seem to find a proper way of doing so.
Would someone know how I can set that 'picker'choices to the one I want to (ie translated text)?
{
fn: function(element, eOpts)
{
var picker = this.query('pickerslot')[0];
var store = picker.getStore();
for (i in LANG.word.months)
{
store.getAt(i).data.text=LANG.word.months[i];
}
picker.refresh();
},
event: 'painted'
}
Worked Like a charm, got it was hard to find the proper way

Resources