AngularJS Date issue

Question

I need an AngularJS date picker that allows me to do the following, default the available dates (min and max), blank by default so the user has to enter a date if required, and for the user to be able to select the date from a calender control OR enter it manually. I thought I nearly had it with the following supposid out of the box component however when you try to manually enter a date you get some weird results. It looks like its using US format when you manually enter the date but UK when you use the calender. if you enter 28-03-2017 it saves it as 2019-04-03T08:11:07.366Z, something clearly isn't correct, Please help if you can.

Codepen: http://codepen.io/petemossuk/pen/mRNKpv

<ul class="dropdown-menu">
<li><a href="/javascript-minify">Javascript Minify</a>
</li>
<li><a href="/css-minify">CSS Minify</a>
</li>
<li><a href="/css-beautify">CSS Beautify</a>
</li>
<li><a href="/javascript-beautify">Javascript Beautify</a>
</li>
<li><a href="/html-beautify">HTML Beautify</a>
</li>
<li><a href="/perl-beautify">Perl Beautify</a>
</li>
<li><a href="/php-beautify">PHP Beautify</a>
</li>
<li><a href="/go-beautify">GO Beautify</a>
</li>
<li><a href="/ruby-beautify">Ruby Beautify</a>
</li>
<li><a href="/sql-beautify">SQL Beautify</a>
</li>
<li><a href="/xml-beautify">XML Beautify</a>
</li>

 angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
 .config(function $mdDateLocaleProvider) {  $mdDateLocaleProvider.formatDate = function (date) {
    return !date ? '' : moment(date).format('DD-MM-YYYY');
};})
 .controller('AppCtrl', function() {  this.myDate = new Date();});

Ajeje Brazorf · Accepted Answer · 2017-03-14 16:47:40Z

I always recommend Angular Moment Picker: it's written in pure Angular.JS (no jQuery required) and makes use of Moment.js for all cool things like internalization or operation on dates/times.

In the README.md file, it also has a lot of very easy examples for all the features you need.

Here is a plunker example: https://embed.plnkr.co/nPGbO3KkmmPqf7mfN2PC/

angular
  .module('Demo', ['moment-picker'])
  .controller('DemoController', ['$scope', function () {
    var ctrl = this;
    
    // noop.
  }]);

<!DOCTYPE html>
<html ng-app="Demo" style="height:100%;">
  <head>
    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular Moment Picker</title>
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.css" rel="stylesheet">
  </head>
  <body ng-cloak style="padding:20px;"
        ng-controller="DemoController as ctrl">
    
    <div class="form-group">
      <label>Using a <code>&lt;DIV&gt;</code> element</label>
      <div class="form-control"
           moment-picker="ctrl.div.stringDate"
           format="YYYY-MM-DD"
           locale="en">
        <a class="pull-right"
           ng-if="ctrl.div.stringDate"
           ng-click="ctrl.div.stringDate = ''">
          &times;
        </a>
        <span ng-class="{'text-muted': !ctrl.div.stringDate}">
          {{ ctrl.div.stringDate || 'Select a date...' }}
        </span>
      </div>
      <div class="help-block small">
        <b>Note:</b> since this is not an input field, users cannot type
        custom text.
      </div>
    </div>
    
    <hr>
    
    <div class="form-group">
      <label>Using a <code>&lt;INPUT&gt;</code> element</label>
      <input class="form-control"
             placeholder="Select a date..."
             moment-picker="ctrl.input.stringDate"
             locale="en"
             format="YYYY-MM-DD"
             ng-model="ctrl.input.momentDate"
             ng-model-options="{ updateOn: 'blur' }">
      <div class="help-block small">
        <b>Note:</b> <code>ng-model</code> is required for inputs,
        even if you never use it.
      </div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
    <script src="//rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.js"></script>
    <script src="script.js"></script>
</body>
</html>

Carnaru Valentin · Accepted Answer · 2017-03-14 10:47:46Z

In general I use datepicker form bootstrap ui:

    <div class="input-group">
        <input 
            type="text" 
            name="startDate" 
            id="legal-basis"
            class="form-control" 
            uib-datepicker-popup="{{vm.format}}" 
            ng-model="versionsVm.version.startDate" 
            is-open="vm.popup.opened" 
            datepicker-options="dateOptions" 
            close-text="Close" 
            alt-input-formats="vm.altInputFormats"
            required
            ng-disabled="versionsVm.version.status == 'VALIDATED'" 
        />
        <span class="input-group-btn">
            <button ng-if="versionsVm.version.status != 'VALIDATED'" type="button" class="btn btn-default" ng-click="vm.openDate()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>

And in controller:

function YourController() {

    var vm = this;

    vm.openDate = function() {
        vm.popup.opened = true;
    };

    vm.formats = ['dd/MM/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    vm.format = vm.formats[0];
    vm.altInputFormats = ['M!/d!/yyyy'];

    vm.popup = {
        opened: false
    };

}

For full documentation check: https://angular-ui.github.io/bootstrap/#!#datepicker

Collectives™ on Stack Overflow

AngularJS Date issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related