I'd really like to use the Umbraco date picker for the dateFrom and dateTo fields, but I can't work out how to bind it up from inside an ng-repeater block like this.
For simple situations, it looks like it can be connected up like this:
I think you can better use umbDateTimePicker if you wanne use a umbraco styled date picker. and make your change event generic so he can update your model.
Only a week or so delayed response to your tweet ... hopefully I can try to help. Although I suspect something details may get lost in translation, e.g. prepare yourself, as I doubt this will be a copy-n-paste solution.
The reason I've used new Date("") instead of a string, is that in Bootstap DateTimePicker, it checks if the value is a Date object, if it's a string, then it will attempt to parse it using the date-format provided, see here:
Meaning that if your date/string value is "2018-04-30T12:34:56Z" and your format is "D MMM YYYY", then it just ain't gonna work. Better to work with actual Date objects.
Now, when I said this wouldn't be a copy-n-paste solution, the issue is how to persist all these values back to $scope.model.value? ... and that's the bit that take a LOT of trial & error. aka, I don't have a solid answer for that, sorry.
There are various things you can do with angularjs watchers or the formSubmitting event ... they are all a bit hacky. Feel free to take a look at how I tackled this for my Property List editor...
I've looked at the current implementation of the umb datetimepicker and unfortunately i don't see a way of passing the value. I think building your own directive is your best bett.
How to bind <umb-editor> date picker values inside an ng-repeat?
Hi there,
I'm creating a custom property editor that can store multiple prices for an item based on a date range.
The JSON for the value looks like this:
Here's my dateprices.editor.html file:
I'd really like to use the Umbraco date picker for the dateFrom and dateTo fields, but I can't work out how to bind it up from inside an ng-repeater block like this.
For simple situations, it looks like it can be connected up like this:
With the "datePickerSingle" model defined in the controller:
But for my example, I want to bind multiple date pickers to the values inside my ng-repeat block.
Anyone got any tips or examples of this being done?
Thanks,
Mike
Hi Mike,
I think you can better use umbDateTimePicker if you wanne use a umbraco styled date picker. and make your change event generic so he can update your model.
https://our.umbraco.org/apidocs/ui/#/api/umbraco.directives.directive:umbDateTimePicker
Thanks Marcel.
I'm looking at the umbDateTimePicker, but I'm still not sure how to manage the situation where the picker is inside an ng-repeat loop.
Each iteration of the ng-repeat loop has two dates, and I'm trying to work out how to bind these "From" and "To" dates for each row to date pickers:
Is this possible? I can only find examples that bind a single date value to a date picker; nothing with multiple values inside an ng-repeat loop.
Thanks,
Mike
Hi Mike,
Only a week or so delayed response to your tweet ... hopefully I can try to help. Although I suspect something details may get lost in translation, e.g. prepare yourself, as I doubt this will be a copy-n-paste solution.
OK, you can use the
<umb-date-time-picker options="..." />
directive, like so...... but it requires a bit of extra fiddly config in the values ... e.g.
The date picker is using the Bootstrap DateTimePicker library; the full config options for it can be seen here: https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/lib/datetimepicker/bootstrap-datetimepicker.js#L1412-L1435
Make note, that the
defaultDate
is the one that is used. I'd have expected it to be calledvalue
, but I dunno.To be honest, you wont want to keep duplicating the datetimepicker config, so you could whack that in a variable and extend it, like so...
but that's just a suggestion
The reason I've used
new Date("")
instead of a string, is that in Bootstap DateTimePicker, it checks if the value is aDate
object, if it's astring
, then it will attempt to parse it using the date-format provided, see here:https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/lib/datetimepicker/bootstrap-datetimepicker.js#L1297
Meaning that if your date/string value is
"2018-04-30T12:34:56Z"
and your format is"D MMM YYYY"
, then it just ain't gonna work. Better to work with actualDate
objects.Now, when I said this wouldn't be a copy-n-paste solution, the issue is how to persist all these values back to
$scope.model.value
? ... and that's the bit that take a LOT of trial & error. aka, I don't have a solid answer for that, sorry.There are various things you can do with angularjs watchers or the
formSubmitting
event ... they are all a bit hacky. Feel free to take a look at how I tackled this for my Property List editor...https://github.com/umco/umbraco-property-list/blob/develop/src/Our.Umbraco.PropertyList/Web/UI/App_Plugins/PropertyList/js/propertylist.js#L119-L133
I hope some of this helps?
Cheers,
- Lee
Thanks so much Lee - I'll give this a whirl. Really appreciate you taking the time.
Mike
@Mike,
I am currently on holiday but will try to make a sample to use it!
Marcel
Hi Mike,
I've looked at the current implementation of the umb datetimepicker and unfortunately i don't see a way of passing the value. I think building your own directive is your best bett.
Here is some inspiration: https://gist.github.com/jamiepollock/ad1d1be07453cd1d7509
is working on a reply...