Skip to content

Instantly share code, notes, and snippets.

@mlesikov

mlesikov/datetimepickerDirective.js

Forked from mwadams/datetimepickerDirective.js
Created October 23, 2018 12:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mlesikov/dc2837e6b9614cacb3090c9ecb8f0864 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mlesikov/dc2837e6b9614cacb3090c9ecb8f0864 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mwadams mwadams revised this gist Apr 23, 2015. 1 changed file with 0 additions and 63 deletions.
    63 changes: 0 additions & 63 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +0,0 @@
    <html ng-app="dateTimeSandbox">
    <head>
    <meta charset='utf-8'/>
    <title>DatePicker Directive</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet"
    href="http://eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css">
    </head>
    <body>


    <div class="container" ng-controller="dateTimeController">
    <div class="row">
    <div class='col-sm-6'>
    <h1> {{vm.message}}</h1>

    <div class="form-group">

    </div>
    <label class="label label-info">DateTimePicker</label>
    <br/>

    <div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>

    <br/>
    <label class="label label-info">DateTimePicker (Angular Directive)</label>

    <br/>
    <input type="text"
    class="form-control"
    ng-model="vm.dateTime"
    data-date-time-picker
    data-language="{{ru}}"
    data-pick12HourFormat="false"
    data-use-current="{{false}}"
    data-location="{{testProject}}"
    />
    <br/>
    <pre>{{vm|json}}</pre>

    </div>
    </div>
    </div>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="build\js\bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="angularjs/angular.js"></script>
    <script type="text/javascript" src="js/datetimepickerDirective.js"></script>
    <script type="text/javascript">
    $(function () {
    $('#datetimepicker1').datetimepicker({
    language: 'ru',
    useCurrent: false
    });
    });
    </script>
    </body>
    </html>
  2. @mwadams mwadams revised this gist Apr 23, 2015. 1 changed file with 1 addition and 7 deletions.
    8 changes: 1 addition & 7 deletions datetimepickerDirective.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,13 +39,7 @@ angular
    $element.on('dp.change', function (ev) {
    $timeout(function () {
    var dtp = $element.data("DateTimePicker");
    var moment = dtp.date();
    var result = null;
    if (!!moment) {
    result = moment.toDate();
    }

    controller.$setViewValue(result);
    controller.$setViewValue(dtp.date());
    });
    });

  3. @mwadams mwadams revised this gist Apr 23, 2015. 1 changed file with 54 additions and 48 deletions.
    102 changes: 54 additions & 48 deletions datetimepickerDirective.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,65 +1,71 @@
    (function () {
    var dateTimeController = function ($scope, $rootScope) {
    $scope.vm = {
    message: "Bootstrap DateTimePicker Directive",
    dateTime: {}
    };
    'use strict';

    angular
    .module('datetimepicker', [])

    $scope.$watch('change', function(){
    console.log($scope.vm.dateTime);
    });
    .provider('datetimepicker', function () {
    var default_options = {};

    this.setOptions = function (options) {
    default_options = options;
    };

    /*
    $scope.$on('emit:dateTimePicker', function (e, value) {
    $scope.vm.dateTime = value.dateTime;
    console.log(value);
    })
    */
    };
    var dateTimePicker = function ($rootScope) {
    this.$get = function () {
    return {
    getOptions: function () {
    return default_options;
    }
    };
    };
    })

    .directive('datetimepicker', [
    '$timeout',
    'datetimepicker',
    function ($timeout,
    datetimepicker) {
    var default_options = datetimepicker.getOptions();

    return {
    require: '?ngModel',
    restrict: 'AE',
    scope: {
    pick12HourFormat: '@',
    language: '@',
    useCurrent: '@',
    location: '@'
    datetimepickerOptions: '@'
    },
    link: function (scope, elem, attrs) {
    elem.datetimepicker({
    pick12HourFormat: scope.pick12HourFormat,
    language: scope.language,
    useCurrent: scope.useCurrent
    })
    link: function ($scope, $element, $attrs, controller) {
    var passed_in_options = $scope.$eval($attrs.datetimepickerOptions);
    var options = jQuery.extend({}, default_options, passed_in_options);

    //Local event change
    elem.on('blur', function () {
    $element.on('dp.change', function (ev) {
    $timeout(function () {
    var dtp = $element.data("DateTimePicker");
    var moment = dtp.date();
    var result = null;
    if (!!moment) {
    result = moment.toDate();
    }

    console.info('this', this);
    console.info('scope', scope);
    console.info('attrs', attrs);
    controller.$setViewValue(result);
    });
    });

    function setPickerValue() {
    var result = null;
    if (!!controller && !!controller.$viewValue) {
    result = controller.$viewValue;
    }
    var dtp = $element.data("DateTimePicker");
    dtp.date(result);
    }

    /*// returns moments.js format object
    scope.dateTime = new Date(elem.data("DateTimePicker").getDate().format());
    // Global change propagation
    controller.$render = function (value) {
    setPickerValue();
    };

    $rootScope.$broadcast("emit:dateTimePicker", {
    location: scope.location,
    action: 'changed',
    dateTime: scope.dateTime,
    example: scope.useCurrent
    });
    scope.$apply();*/
    })
    $element.datetimepicker(options);

    setPickerValue();
    }
    };
    }

    angular.module('dateTimeSandbox', []).run(['$rootScope', function ($rootScope) {
    }]).controller('dateTimeController', ['$scope', '$http', dateTimeController
    ]).directive('dateTimePicker', dateTimePicker);
    })();
    ]);
  4. @eugenekgn eugenekgn revised this gist Jul 30, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions datetimepickerDirective.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,8 +2,7 @@
    var dateTimeController = function ($scope, $rootScope) {
    $scope.vm = {
    message: "Bootstrap DateTimePicker Directive",
    dateTime: {},
    dateTime : {}
    dateTime: {}
    };

    $scope.$watch('change', function(){
  5. @eugenekgn eugenekgn revised this gist Jul 23, 2014. 2 changed files with 21 additions and 7 deletions.
    27 changes: 20 additions & 7 deletions datetimepickerDirective.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,21 +2,28 @@
    var dateTimeController = function ($scope, $rootScope) {
    $scope.vm = {
    message: "Bootstrap DateTimePicker Directive",
    dateTime: {}
    dateTime: {},
    dateTime : {}
    };

    $scope.$on('emit:dateTimePicker', function (e, value) {
    $scope.vm.dateTime = value.dateTime;
    console.log(value);
    $scope.$watch('change', function(){
    console.log($scope.vm.dateTime);
    });


    /*
    $scope.$on('emit:dateTimePicker', function (e, value) {
    $scope.vm.dateTime = value.dateTime;
    console.log(value);
    })
    */
    };
    var dateTimePicker = function ($rootScope) {

    return {
    require: '?ngModel',
    restrict: 'AE',
    scope: {
    dateTime: '@',
    pick12HourFormat: '@',
    language: '@',
    useCurrent: '@',
    @@ -31,7 +38,13 @@

    //Local event change
    elem.on('blur', function () {
    // returns moments.js format object

    console.info('this', this);
    console.info('scope', scope);
    console.info('attrs', attrs);


    /*// returns moments.js format object
    scope.dateTime = new Date(elem.data("DateTimePicker").getDate().format());
    // Global change propagation
    @@ -41,7 +54,7 @@
    dateTime: scope.dateTime,
    example: scope.useCurrent
    });
    scope.$apply();
    scope.$apply();*/
    })
    }
    };
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,7 @@ <h1> {{vm.message}}</h1>
    <br/>
    <input type="text"
    class="form-control"
    ng-model="vm.dateTime"
    data-date-time-picker
    data-language="{{ru}}"
    data-pick12HourFormat="false"
  6. @eugenekgn eugenekgn created this gist Jul 23, 2014.
    53 changes: 53 additions & 0 deletions datetimepickerDirective.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    (function () {
    var dateTimeController = function ($scope, $rootScope) {
    $scope.vm = {
    message: "Bootstrap DateTimePicker Directive",
    dateTime: {}
    };

    $scope.$on('emit:dateTimePicker', function (e, value) {
    $scope.vm.dateTime = value.dateTime;
    console.log(value);
    });
    };
    var dateTimePicker = function ($rootScope) {

    return {
    require: '?ngModel',
    restrict: 'AE',
    scope: {
    dateTime: '@',
    pick12HourFormat: '@',
    language: '@',
    useCurrent: '@',
    location: '@'
    },
    link: function (scope, elem, attrs) {
    elem.datetimepicker({
    pick12HourFormat: scope.pick12HourFormat,
    language: scope.language,
    useCurrent: scope.useCurrent
    })

    //Local event change
    elem.on('blur', function () {
    // returns moments.js format object
    scope.dateTime = new Date(elem.data("DateTimePicker").getDate().format());
    // Global change propagation

    $rootScope.$broadcast("emit:dateTimePicker", {
    location: scope.location,
    action: 'changed',
    dateTime: scope.dateTime,
    example: scope.useCurrent
    });
    scope.$apply();
    })
    }
    };
    }

    angular.module('dateTimeSandbox', []).run(['$rootScope', function ($rootScope) {
    }]).controller('dateTimeController', ['$scope', '$http', dateTimeController
    ]).directive('dateTimePicker', dateTimePicker);
    })();
    62 changes: 62 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <html ng-app="dateTimeSandbox">
    <head>
    <meta charset='utf-8'/>
    <title>DatePicker Directive</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet"
    href="http://eonasdan.github.io/bootstrap-datetimepicker/content/bootstrap-datetimepicker.css">
    </head>
    <body>


    <div class="container" ng-controller="dateTimeController">
    <div class="row">
    <div class='col-sm-6'>
    <h1> {{vm.message}}</h1>

    <div class="form-group">

    </div>
    <label class="label label-info">DateTimePicker</label>
    <br/>

    <div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control"/>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>

    <br/>
    <label class="label label-info">DateTimePicker (Angular Directive)</label>

    <br/>
    <input type="text"
    class="form-control"
    data-date-time-picker
    data-language="{{ru}}"
    data-pick12HourFormat="false"
    data-use-current="{{false}}"
    data-location="{{testProject}}"
    />
    <br/>
    <pre>{{vm|json}}</pre>

    </div>
    </div>
    </div>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="build\js\bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="angularjs/angular.js"></script>
    <script type="text/javascript" src="js/datetimepickerDirective.js"></script>
    <script type="text/javascript">
    $(function () {
    $('#datetimepicker1').datetimepicker({
    language: 'ru',
    useCurrent: false
    });
    });
    </script>
    </body>
    </html>