AngularJS datepicker using date-set

Question

I've been trying out this AngularJS package (https://www.npmjs.com/package/angularjs-datepicker) and was struggling to use the date-set property. In my example I have 2 calendars, 1 that should display yesterdays date and 1 that should display todays date. Could someone please help me set these dates?

Datepicker:

  <div class="datepicker-container">
    <div class="date-from">
      From:
      <datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
    <div class="date-too">
      To:
      <datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
        <div class="input-group">
          <input class="form-control" placeholder="Choose a date"/>
          <span class="input-group-addon" style="cursor: pointer">
            <i class="glyphicon glyphicon-calendar"></i>
          </span>
        </div>
      </datepicker>
    </div>
  </div>

Setting the date:

$scope.dateFrom = new Date();
$scope.dateTo = new Date();

Gopinath Shiva · Accepted Answer · 2016-08-09 09:21:39Z

3

  var date = new Date();

  $scope.today = date; //to show today's date

  date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday

  $scope.yesterday = date;

Using date-set:

From the documentation linked above, https://www.npmjs.com/package/angularjs-datepicker . I see you have to pass date object as string to attribute date-set , hence convert the date object to string.

//js 
var date = new Date();

$scope.today = date.toString(); //to show today's date

date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday

$scope.yesterday = date.toString();



//html
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{today}}" class="date-picker">

<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{yesterday}}" class="date-picker">

edited Aug 9, 2016 at 9:21

answered Aug 9, 2016 at 9:10

Gopinath Shiva

3,8905 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Garrett Over a year ago

How would I then use that in the 'date-set={{}}'?

Gopinath Shiva · Accepted Answer · 2016-08-09 09:39:03Z

0

see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>

edited Aug 9, 2016 at 9:39

Gopinath Shiva

3,8905 gold badges30 silver badges50 bronze badges

answered Aug 9, 2016 at 9:04

Neeraj Prajapati

5411 gold badge6 silver badges26 bronze badges

Comments

weinny soares · Accepted Answer · 2020-06-09 20:37:13Z

0

I solved it in a simpler way, just activated the ng-if attribute in the div before the datepicker

 pagamentoService.getCronograma(moment().year()).then(function (resp){
                
            var cronogramas = resp.data;
            console.log('99',resp.data);
            
            cronogramas.forEach(function (obj){
                vm.datasBloqueadas.push(moment(obj.data_limite).format('YYYY-M-D'));
            });
           
        }).catch(function (err){
            console.log(err);
        });

<div class="col-md-4 mt-1">
                    <label>data vencimento</label>
                    <div ng-if="Beneficios.datasBloqueadas.length > 0" class="input-control full-size text">
                        <datepicker date-format="yyyy-MM-dd" date-disabled-dates="{{Beneficios.datasBloqueadas}}" >
                            <input id="dataVencimento"  class="required" type="date" date-converter ng-model="Beneficios.view.data_filter"
                            data-role="hint" data-hint-background="bg-orang-e"
                            data-hint-color="fg-white" data-hint-position="bottom" data-hint-mode="2">
                            <button class="button" onclick="$('#dataVencimento').focus();">
                                <span class="mif-calendar"></span>
                            </button>
                        </datepicker>
                    </div>

answered Jun 9, 2020 at 20:37

weinny soares

31 bronze badge

1 Comment

Alpi Murányi Over a year ago

Hi Weinny and thanks for the contribution! Could you edit your answer to include a basic explanation of the solution you suggested (i.e. what is ng-if and what it does)? Then your answer will serve future readers even better. Thanks!

Collectives™ on Stack Overflow

AngularJS datepicker using date-set

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related