Develop Reference

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

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

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.

Save state of ng-change local scope in Datepicker

I have come across what seems like a very simple issue, but I cannot figure out how to fix it. I posted this question originally, but it seems the issue is with the scope.
So basically, this is what is happening:
I have a datepicker inside a form. When the user selects a date, ng-change will trigger and it calls the function setDate(date).
In debug mode, I confirmed that the selected data indeed is passed to the function.
Inside the function, $scope.simStartDate variable is assigned this value and I can see its value changing.
However, when I later go to submit the form, $scope.simStartDate is back with its original initialized value.
I have put a breakpoint at the initialization $scope.simStartDate = new Date(), but it does not hit. Meaning that the variable is not initialized again.
I have tried using a $scope variable in the ng-model, but still the same issue.
This makes me think that ng-change creates a local scope and updates a local variable, which I cannot access later. Is my understanding correct? If not how can I fix this?
This is my HTML:
<div class="row" ng-controller="DashboardParamsFormCtrl">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">Simulation start date</label>
<p class="input-group">
<input type="text" class="form-control"
uib-datepicker-popup="{{format}}"
datepicker-options="options"
ng-model="date"
ng-change="setDate(date)"
is-open="opened" ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
show-button-bar="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
This is the JS:
angular.module('BlurAdmin.pages.dashboard')
.controller('DashboardParamsFormCtrl', DashboardParamsFormCtrl);
/** #ngInject */
function DashboardParamsFormCtrl(baConfig, layoutPaths, baUtil, $scope)
{
$scope.ParamsFormBtnClicked = function()
{
console.log("Date: " + $scope.simStartDate);
}
$scope.open = open;
$scope.opened = false;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.options = {
showWeeks: false
};
function open() {
$scope.opened = true;
}
$scope.simStartDate = new Date();
$scope.date = new Date();
$scope.setDate = function(startDate)
{
$scope.simStartDate = startDate;
}
}
})();
Thank you.

your passing new date(); without value, it will get current date. you should pass ng-model value inside new date();
like this.
$scope.simStartDate = new Date(date);
$scope.date = new Date(date);
hope this link will help you too plnkr

Datepicker ui-bootstrap setting value from model

I'm using the ui-bootstrap datepicker for my angular form. When I get the json from the database and set the value on the form the Date shows on the input but I can't submit because the input does not recognise the value from the scope, and I have to pick again the dates. I'll explain better:
This is my datepicker options in the controller that I copied from the documentation:
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.open = function( $event ) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.open2 = function( $event ) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = [ 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate' ];
$scope.format = $scope.formats[ 0 ];
My edit input is like this:
<div class="input-group"><input name="StartDate" type="text" class="form-control" popup-placement="top-left" datepicker-popup="{{format}}" is-open="opened" close-text="Close" ng-model="period.StartDate" id="StartDate" required />
<span class="input-group-btn">
<button type="button" class="btn btn-default calendar-input" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span></div>
For debug purpose I showed the $scope.period.StarDate and at the beginning the date shows without quotes, but if choose again on the picker it shows with quotes.
What I tried was to filter the data before show it on the view like this:
$scope.period.StartDate = $filter('date')($scope.period.StartDate, 'dd-MMMM-yyyy');
The date is show it fine on the input and does let me submit it, but it saves only 0000-00-00 on the database. How do I filter the date from the json for the datepicker can recognize the data?
UPDATE
The data Type on the database is "date" only, and when I do the query the json brings the date like this: 2017-07-30T00:00:00.000Z
Even if I don't put required on the datepicker, it expect a date before doing the submit.

daterangepicker not getting triggered

I am implementing daterange picker in my page. But it is not working. Could somebody please point out what am I doing wrong or What is that I am missing.
CSHTML:
<div class="has-feedback" >
<input type="text" id="txtDateRange"
class="form-control input-md" name="RangeDates"
placeholder="Select Range"
ng-model="Model.RageDates">
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<span style="color: #a94442" >
<label class="control-label" class="has-error" ng-show="RangeDates.$invalid">Required.</label>
</span>
</div>
js :
DashBoardModule.controller('DashBoardController', ['$scope','$filter', 'DashBoardModuleService', function ($scope,$filter, DashBoardModuleService) {
$('#txtDateRange').on('apply.daterangepicker', function (ev, picker) {
$scope.isRefreshing = true;
$scope.Model.introductoryPeriodEnd = $filter('date')(new Date(picker.endDate), dateFormat);
$scope.Model.introductoryPeriodStart = $filter('date')(new Date(picker.startDate), dateFormat);
$scope.Model.typeAvailability = picker.chosenLabel === "Custom Range" ? "Custom" : picker.chosenLabel;
$scope.$apply();
});
angular.element(document).ready(function () {
var dateConfiguration = new Date();
$('#txtDateRange').daterangepicker({
ranges: {
'Next Week': [new Date(), dateConfiguration.setDate(dateConfiguration.getDate() + 6)],
'Next 2 Weeks': [new Date(), dateConfiguration.setDate(dateConfiguration.getDate() + 8)]
},
format: dateFormat,
autoApply: true
});
});
}]);
_Layout :
<!-- Range Date Picker -->
<link href="~/Scripts/Controls/DateRangePicker/daterangepicker.css" rel="stylesheet" />
<script src="~/Scripts/Controls/DateRangePicker/daterangepicker.js"></script>

First, I'm not answering your question. Because I prefer advice you: AVOID IT.
What you are doing is not the Angular Way. You are working in the jQuery Way. So, will be harder to you to use Angular and Libs. So, you have 2 choices: use AngularJS or use jQuery.
Why you are not doing in Angular way:
0 - With Angular you shouldn't use jQuery to select elements. (you are using with the $('#txtDateRange').on('apply.daterangepicker', and angular.element(document).ready and $('#txtDateRange').daterangepicker
Take care of this. Or Angular will be harder and not elegant.
If you prefer to use angular, you can use an ANGULAR Date Picker, Please check this: http://mgcrea.github.io/angular-strap/#/datepickers
I hope it can help you!

How can angular ui-bootstrap datepicker settings be declared in one place?

I'm using angular-ui datepicker and currently have the settings declared in a controller, eg:
$scope.date = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
In order to be DRY, I want to declare this in one place, so that the datepicker can be used anywhere, without having to declare the settings each time.
I've tried putting them into a factory that would be injected into a controller, but with no success. I'm quite new to building factories/services.
I found this SO question that mentions declaring the settings under the config method, like this:
.config(['datepickerConfig', function(datepickerConfig) {
datepickerConfig.showWeeks = false;
}]);
But this doesn't work for me for some reason.
How can I declare the datepicker settings in once place to be used globally, or for injection?

To declare datepicker in 'one place' for easy re-use, I built a factory for the data/config:
.factory('datepickerService', function() {
var factory = {};
factory.date = new Date();
factory.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
this.opened = true;
};
return factory;
});
Then a datepicker controller that injects the datepickerService, hooking the $scope up with the factory config.
.controller('datepickerCtrl', function ($scope, datepickerService) {
$scope.date = datepickerService.date;
$scope.open = datepickerService.open;
});
A directive:
.directive('supermanDatepicker', function () {
return {
templateUrl:'views/partials/datepicker.html'
};
});
HTML partial template with the standard ui-boostrap datepicker (but declaring the controller)
<div class="input-group" ng-controller="datepickerCtrl">
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="shortDate"
placeholder="dd-mm-yyyy"
is-open="opened"
min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button"
class="btn"
ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
Then finally, it can be plugged into any view:
<div superman-datepicker></div>