CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap-3angular-bootstrap
user944513
user944513

Reputation: 12729

how to open bootstrap datepicker in angular js?

could you please tell me how to open bootstrap datepicker in angular js .I have two field name and data.I want to open datepicker on click of date field .here is my code http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW?p=preview

var app = angular.module('plunker', ['angularMoment']);

app.controller('MainCtrl', function($scope, moment) {
  $scope.name = 'World';
  console.log(moment)
  var d = new Date(613938600000);
  $scope.c = {
    name: {
      name: 'abc'
    },
    date: {
      name: moment(d).format('DD-MMM-YYYY')
    }
  };

  $scope.onclick = function() {
    if (!moment($scope.c.date.name).isValid()) {
      alert('Everything is wrong dude');
    } else {
      alert('Everything goood');
    }
  }

});

any update

Upvotes: 0

Views: 135

Answers (2)

Richang Sharma
Richang Sharma

Reputation: 442

Please replace the input field with this.

<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="x.name" is-open="open" data-ng-click="open = true" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />

I have added these directives at the input

<... is-open="open" data-ng-click="open = true" ...>

Add these to directives to your datepicker inputs. This is should work. Try in your plunker

Upvotes: 1

CoolestNerdIII
CoolestNerdIII

Reputation: 780

Not sure if you want to go this route, but my suggestion would be to leverage UI Bootstrap. Opening a datepicker is made fairly easy with this library, along with other bootstrap functionality without having to port bootstrap entirely.

Upvotes: 0

Related Questions