角度UIの日付ピッカー。今日から週末を除いてわずか5日有効

私のプロジェクトでAngular UI Bootstrap datepickerディレクティブを使用しています。私は現在の日からわずか5日を有効にする必要があるように、この特定の必要性を持っています。週末の場合は、それらを無効にして残りの日を有効にする必要があります。たとえば、金曜日の今日の場合は、金、月、火、ウェブ、スラムを有効にする必要があります。私はこれを達成するためにdateDisabledプロパティを使用しています。問題はすべて過去1か月の日付も有効になっています。また、私が思いついた解決策はエレガントではないと思います。以下は私のマークアップとコードです。親切に私を助けてください。前もって感謝します。あなたが探しているものを角度UIの日付ピッカー。今日から週末を除いてわずか5日有効

<input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/> 

vm.dateOptions = { 
    dateDisabled: disabled, 
    minDate: today    
}; 

function disabled(data) { 
     var date = data.date, 
      mode = data.mode; 
     if (today.getDay() === 0 || today.getDay() === 6) { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5); 
     }else if (today.getDay() === 1) { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4); 
     }else { 
      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6); 
     } 
}

出典

2016-05-23 logesh

はas described in the docs、min-date、max-date、およびdate-disabled属性です。この例ではdate-disabled機能は、ドキュメントから直接取得し、利用可能な日付の範囲を制限するためには、単に現在の日時にmin-date属性に設定されています

vm.dt = new Date(); 
vm.minDate = angular.copy(vm.dt);

を...とmax-date 5日から今：

var fiveDaysFromNow = angular.copy(vm.dt); 
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5); 
vm.maxDate = fiveDaysFromNow;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
 
    
 
    var vm = this; 
 
    
 
    function today() { 
 
    vm.dt = new Date(); 
 
    } 
 
    
 
    today(); 
 
    
 
    vm.opened = false; 
 

 
    vm.openDatePopup = function() { 
 
    vm.opened = true; 
 
    }; 
 

 
    // Disable weekend selection 
 
    vm.disabled = function(date, mode) { 
 
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 
 
    }; 
 
    
 
    vm.minDate = angular.copy(vm.dt); 
 
    
 
    var fiveWeekdaysFromNow = angular.copy(vm.dt); 
 
    fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7); 
 
    vm.maxDate = fiveWeekdaysFromNow; 
 

 
    vm.dateOptions = { 
 
    formatYear: 'yy', 
 
    startingDay: 0 
 
    }; 
 

 
    vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
 
    vm.format = vm.formats[0]; 
 

 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
    <style> 
 
     .full button span { 
 
     background-color: limegreen; 
 
     border-radius: 32px; 
 
     color: black; 
 
     } 
 
     .partially button span { 
 
     background-color: orange; 
 
     border-radius: 32px; 
 
     color: black; 
 
     } 
 
    </style> 
 
    <div ng-controller="DatepickerDemoCtrl as demo"> 
 
     <div class="row"> 
 
     <div class="col-xs-8 col-xs-offset-2"> 
 
      <p class="input-group"> 
 
      <input type="text" 
 
        class="form-control" 
 
        uib-datepicker-popup="{{demo.format}}" 
 
        ng-model="demo.dt" 
 
        show-weeks="false" 
 
        is-open="demo.opened" 
 
        min-date="demo.minDate" 
 
        max-date="demo.maxDate" 
 
        datepicker-options="demo.dateOptions" 
 
        date-disabled="demo.disabled(date, mode)" 
 
        ng-required="true" 
 
        close-text="Close"/> 
 
      <span class="input-group-btn"> 
 
       <button type="button" 
 
         class="btn btn-default" 
 
         ng-click="demo.openDatePopup()"> 
 
       <i class="glyphicon glyphicon-calendar"></i> 
 
       </button> 
 
      </span> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

は、この情報がお役に立てば幸い！

出典

2016-05-24 02:44:00

こんにちは、ありがとうございました。これにより、週末は無効になりますが、週末にもカウントされます。だから私はif else条件を置くことになった。 – logesh

5週間前までにしたいのであれば、週末を無効にして5日間ではなく7日間を追加しないでください。どんな日であっても、平日の5つの平日のみを選択することができます。私はそれに応じて例を更新しました。 –

角度UIの日付ピッカー。今日から週末を除いてわずか5日有効

答えて

関連する問題