Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.
I am using angular-bootstrap-datetimepicker library from the below url:
Link to library
I am currently embedding the calender on the page.
I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.
Here is the sample code:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>
I am trying to highlight today's date automatically when the datetimepicker shows on the page.
As you can see, in the config options, i could set the default view and min view.
Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again.
Here is the link to Plunkr.
Any suggestions (regarding highlight today date by default) will be appreciated.
To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:
$scope.data = { embeddedDate: new Date() };
Working Plunkr
Related
Consider the following setup: I have a form with a angular-bootstrap datepicker (uib-datepicker-directive), which I want to serve with different languages, such that dates are shown in different formats.
I am changing the locale dynamically with the angular-dynamic-locale-module, by using information from the state parameters.
A date object is printed with correct language-specific format using the angular date filter: {{vm.date | date:'fullDate'}}
Unfortunately the formatting for the datepicker is not working immediately. When loading the page and call a set-locale function it needs a click into the datepicker to adjust the format of the month and click to the month and back to additionally adjust the translations for the weekdays.
I have created a plunkr to demonstrate the behaviour.
http://plnkr.co/edit/2HA8LI5SzUqx2jSmUdjn?p=preview
Does anyone know this behaviour? And if so, is there a way to fix this, preferably without messing up the datepicker directive?
Thanx in advance, micoud
In Angular 2, I am using PrimeNG calendar using model driven form with *ngSwitchCase as follows
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calendar>
...
</div>
The calendar comes up well on the UI, but when I select the date, or click outside on the page, it does not go away.
Only when I click on tab to go away, the calendar is closed.
If I use ngModule, it works fine, but that is not the requirement.
Does anyone have any clue/example on it, please share
Thanks
Found the error that I was using <div class="section"> somewhere before the primeng calendar.
Renaming the css section class to appsection solved this issue.
When using the Angular UI datepicker in the edit view of the form, until I change the date of the input box the date is not getting passed through Angular UI.
Eg : If the existing date value is 16-September-2014
If I just POST the data without clicking on the datepicker the value I get in javascript is
'16-September-2014'
But if I first select the datepicker and change the date the final value I get in javascript is
'2014-09-06 00:00:00'
This is library I am using
http://angular-ui.github.io/bootstrap/
Try this on your code.I am not sure, but it may solve your problem.
$scope.toDay = new Date();
$scope.date = $scope.toDay;
Now bind $scope.date in your HTML/Jade using ng-model.
data-ng-model="date"
I hope someone can help me with this issue.
I am trying to use the datepicker from the following link
The problem is that I want to be able to use a few features but don't know how.
1)I want to be able to unset a specific date from my angular controller
2)I want to be able to clear all the selected dates from the datepicker calendar.
http://bootstrap-datepicker.readthedocs.org/en/release/methods.html
Here's how my code looks:
<div class="col-md-3">
<h5>Pickup Dates</h5>
<!--Inline DatePicker-->
<div class="datepicker" ng-click="dateSelection()" ng-selected="selectedDates!=-1">
</div>
</div>
<script>
$('.datepicker').datepicker({
multidate: true,
todayHighlight: true,
format: 'dd/MM/yyyy'
});
</script>
My angular controller is as follow
$scope.dt = $('.datepicker').datepicker('getDates');
Then I have a function that gets triggered when a button is clicked.
Once the button is pressed, all dates are saved and then the selected dates
should clear from the calendar but instead a new calendar gets created.
$scope.createSearches=function() {
/*saving dates code*/
$('.datepicker').datepicker('clearDate')
}
I read the documentation and not sure how to use the clearDate event so if someone can help me with this and also how to unset specific dates from the controller, I will really appreciate that.
Thanks
Is there any directive in Angular, I want to enable user when he write 2/3/67 in input for date date needs to be formatted like 02/03/1967 I tried few things on my own but they didn't work.
Just add a Angularjs formating, when displaying users input like so
{{yourdate.variable | date:'yyyy-MM-dd'}}
Se more at AnguarJS date function
EDIT
Here is working Plunker, with different type of dates. Enjoy