diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js
new file mode 100644
index 0000000000..d7e44df113
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdatetimepicker.directive.js
@@ -0,0 +1,179 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbDateTimePicker
+@restrict E
+@scope
+
+@description
+Added in Umbraco version 7.6
+This directive is a wrapper of the bootstrap datetime picker version 3.1.3. Use it to render a date time picker.
+For extra details about options and events take a look here: http://eonasdan.github.io/bootstrap-datetimepicker/
+
+Use this directive to render a date time picker
+
+Markup example
+
+
+
+
+
+
+
+
+
+Controller example
+
+ (function () {
+ "use strict";
+
+ function Controller() {
+
+ var vm = this;
+
+ vm.date = "";
+
+ vm.config = {
+ pickDate: true,
+ pickTime: true,
+ useSeconds: true,
+ format: "YYYY-MM-DD HH:mm:ss",
+ icons: {
+ time: "icon-time",
+ date: "icon-calendar",
+ up: "icon-chevron-up",
+ down: "icon-chevron-down"
+ }
+ };
+
+ vm.datePickerChange = datePickerChange;
+ vm.datePickerError = datePickerError;
+
+ function datePickerChange(event) {
+ // handle change
+ if(event.date && event.date.isValid()) {
+ var date = event.date.format(vm.datePickerConfig.format);
+ }
+ }
+
+ function datePickerError(event) {
+ // handle error
+ }
+
+ }
+
+ angular.module("umbraco").controller("My.Controller", Controller);
+
+ })();
+
+
+@param {object} options (binding): Config object for the date picker.
+@param {callback} onHide (callback): Hide callback.
+@param {callback} onShow (callback): Show callback.
+@param {callback} onChange (callback): Change callback.
+@param {callback} onError (callback): Error callback.
+@param {callback} onUpdate (callback): Update callback.
+**/
+
+(function () {
+ 'use strict';
+
+ function DateTimePickerDirective(assetsService) {
+
+ function link(scope, element, attrs, ctrl) {
+
+ function onInit() {
+ // load css file for the date picker
+ assetsService.loadCss('lib/datetimepicker/bootstrap-datetimepicker.min.css');
+
+ // load the js file for the date picker
+ assetsService.loadJs('lib/datetimepicker/bootstrap-datetimepicker.js').then(function () {
+ // init date picker
+ initDatePicker();
+ });
+ }
+
+ function onHide(event) {
+ if (scope.onHide) {
+ scope.$apply(function(){
+ // callback
+ scope.onHide({event: event});
+ });
+ }
+ }
+
+ function onShow() {
+ if (scope.onShow) {
+ scope.$apply(function(){
+ // callback
+ scope.onShow();
+ });
+ }
+ }
+
+ function onChange(event) {
+ if (scope.onChange && event.date && event.date.isValid()) {
+ scope.$apply(function(){
+ // callback
+ scope.onChange({event: event});
+ });
+ }
+ }
+
+ function onError(event) {
+ if (scope.onError) {
+ scope.$apply(function(){
+ // callback
+ scope.onError({event:event});
+ });
+ }
+ }
+
+ function onUpdate(event) {
+ if (scope.onUpdate) {
+ scope.$apply(function(){
+ // callback
+ scope.onUpdate({event: event});
+ });
+ }
+ }
+
+ function initDatePicker() {
+ // Open the datepicker and add a changeDate eventlistener
+ element
+ .datetimepicker(scope.options)
+ .on("dp.hide", onHide)
+ .on("dp.show", onShow)
+ .on("dp.change", onChange)
+ .on("dp.error", onError)
+ .on("dp.update", onUpdate);
+ }
+
+ onInit();
+
+ }
+
+ var directive = {
+ restrict: 'E',
+ replace: true,
+ templateUrl: 'views/components/umb-date-time-picker.html',
+ scope: {
+ options: "=",
+ onHide: "&",
+ onShow: "&",
+ onChange: "&",
+ onError: "&",
+ onUpdate: "&"
+ },
+ link: link
+ };
+
+ return directive;
+
+ }
+
+ angular.module('umbraco.directives').directive('umbDateTimePicker', DateTimePickerDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
index fb6279608e..cf72c04b1b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
@@ -23,4 +23,19 @@
.umb-querybuilder .row > div {
padding: 20px 0;
border-bottom: 1px solid @grayLighter;
+}
+
+.umb-querybuilder .datepicker input {
+ width: 90px;
+}
+
+.umb-querybuilder .query-items {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.umb-querybuilder .query-items > * {
+ flex: 0 1 auto;
+ margin: 5px;
}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
index bc5bc10e13..d04b7f35a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
@@ -9,6 +9,12 @@
vm.contentTypes = [];
vm.conditions = [];
+ vm.datePickerConfig = {
+ pickDate: true,
+ pickTime: false,
+ format: "YYYY-MM-DD"
+ };
+
vm.query = {
contentType: {
name: "Everything"
@@ -41,6 +47,7 @@
vm.setFilterProperty = setFilterProperty;
vm.setFilterTerm = setFilterTerm;
vm.changeConstraintValue = changeConstraintValue;
+ vm.datePickerChange = datePickerChange;
function onInit() {
@@ -58,7 +65,7 @@
.then(function (conditions) {
vm.conditions = conditions;
});
-
+
throttledFunc();
}
@@ -134,18 +141,28 @@
function setFilterProperty(filter, property) {
filter.property = property;
- throttledFunc();
+ filter.term = {};
+ filter.constraintValue = "";
}
function setFilterTerm(filter, term) {
filter.term = term;
- throttledFunc();
+ if(filter.constraintValue) {
+ throttledFunc();
+ }
}
function changeConstraintValue() {
throttledFunc();
}
+ function datePickerChange(event, filter) {
+ if(event.date && event.date.isValid()) {
+ filter.constraintValue = event.date.format(vm.datePickerConfig.format);
+ throttledFunc();
+ }
+ }
+
var throttledFunc = _.throttle(function () {
templateQueryResource.postTemplateQuery(vm.query)
@@ -154,7 +171,6 @@
});
}, 200);
-
onInit();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
index 40fb909390..906bf0f84d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
@@ -3,8 +3,9 @@
-
- I want
+
+
+
I want
@@ -30,7 +31,7 @@
-
-