Created
January 11, 2016 09:16
-
-
Save jamiepollock/ad1d1be07453cd1d7509 to your computer and use it in GitHub Desktop.
simpledatepicker - basic angularjs datetime picker for custom Umbraco backoffces. It's a little hacky :/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module("umbraco.directives") | |
.directive('simpledatepicker', function ($parse, $filter, assetsService) { | |
return { | |
restrict: 'E', | |
scope: { | |
field: '=' | |
}, | |
controller: function ($scope, $element) { | |
assetsService.loadCss('/umbraco/lib/datetimepicker/bootstrap-datetimepicker.min.css').then(function () { | |
var filesToLoad = ["/umbraco/lib/moment/moment-with-locales.js", | |
"/umbraco/lib/datetimepicker/bootstrap-datetimepicker.js"]; | |
assetsService.load(filesToLoad, $scope).then(function () { | |
var utils = { | |
formatDate: function (value) { | |
var isAlreadyFormatted = /\d{4}-\d{2}-\d{2}$/.test(value); | |
if (isAlreadyFormatted) { | |
return value; | |
} if (value && value instanceof Date) { | |
return moment(value).format('YYYY-MM-DD'); | |
} else if (value) { | |
var parsedDate = utils.parseDate(value); | |
if (parsedDate) { | |
return moment(parsedDate).format('YYYY-MM-DD'); | |
} | |
} | |
}, | |
parseDate: function (value) { | |
if (value && value.indexOf('0001-01-01') < 0) { | |
var parsedDate = value.replace('T', ' ').replace('Z', ''); | |
return new Date(Date.parse(parsedDate)); | |
} | |
} | |
}; | |
var container = $element.find("div.datepicker"); | |
var existingDate = utils.parseDate($scope.field) || new Date(); | |
$scope.field = utils.formatDate(existingDate); | |
$scope.$watch('field', function (newValue, oldValue) { | |
if (newValue) { | |
$scope._tempfield = utils.formatDate(newValue); | |
} else if (oldValue) { | |
$scope._tempfield = utils.formatDate(oldValue); | |
} | |
}); | |
container.datetimepicker({ | |
format: 'YYYY-MM-DD', | |
autoclose: true | |
}) | |
.on('changeDate', function (ev) { | |
$scope.field = utils.formatDate(ev.date); | |
}); | |
}); | |
}); | |
}, | |
templateUrl: '/App_Plugins/PATH/TO/YOUR/VIEWS/simpledatepicker/View.html' | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="input-append date datepicker" style="position: relative;"> | |
<input name="datepicker" type="text" | |
ng-model="_tempfield" | |
class="datepickerinput" /> | |
<span class="add-on"> | |
<i class="icon-calendar"></i> | |
</span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div ng-controller="Your.Controller"> | |
<simpledatepicker field="model.datePublished" dateformat="DD/MM/YYYY" /> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Super directive
Does not seem to close after selection.