Question

我需要一个AngularJS日期选择器，它允许我执行以下操作，默认可用日期（最小和最大），默认为空，因此用户必须输入日期（如果需要），并且用户可以选择来自日历控件的日期或手动输入。我认为我几乎已经使用了以下的supposid开箱即用组件，但是当您尝试手动输入日期时，您会得到一些奇怪的结果。当您手动输入日期时，它看起来像是使用美国格式，而当您使用日历时，它看起来像英国。如果您输入28-03-2017，则会将其保存为2019-04-03T08:11:07.366Z，但显然不正确，如果可以，请提供帮助。

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();});

Answer 1

我总是推荐Angular Moment Picker：它是用纯粹的Angular.JS编写的（不需要jQuery），并且使用Moment.js来处理内部化或日期/时间操作等所有很酷的事情。

在README.md文件中，它还提供了许多非常简单的示例，说明了您需要的所有功能。

这是一个有关的例子： 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>

Answer 2

一般情况下，我使用datepicker表单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>

在控制器中：

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
    };

}

有关完整文档检查： https://angular-ui.github.io/bootstrap/#!#datepicker

AngularJS日期问题

2 个答案: