I am trying to use angular-bootstrap datepicker module in my app and encountered small problem. I use input text and button for displaying date like this:
<div class="row" id="datePicker">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="currentDate"
is-open="opened" datepicker-options="dateOptions" date-disabled="disableDt(date, mode)"
ng-required="true" close-text="Close" show-button-bar="false" ng-init="" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
And due to using angular google maps I have to manually bootstrap my app. It seems that due to manual bootstrapping, datepicker is unable to properly format the date and displays whole unformatted date. As I choose any date from datepicker, date is then displayed correctly in the input field. What is more, model changes don't force format to change (e.g. initially I got some dates from json file and they were displayed in the field, but without formatting too).
Example below:
Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)
Expected date (and one displayed after choosing the same day): 17 January 2014
Is there any way of refreshing this widget so it knows proper formatting at the beginning or changing it at the proper moment to initialize properly?
EDIT: As I moved datepicker to fragment, it should not have problems with not initialized model (this fragment is loaded later). Still, problem occur - date is not formatted and seems not to be connected with formatter or model at all (e.g. making format dropdown and choosing different values as in tutorial doesn't work until date is chosen inside datepicker).
EDIT 2 Solution from the link provided by camden_kid worked! :) Details in his comment.
Answer could be found here:
AngularJS 1.3 - Datepicker initial format is incorrect
I manually formatted the date on initialization as below:
$scope.currentDate = $filter('date')(new Date(), $scope.format);
However, better solution would be to overload directive as follows (taken from the original link):
angular.module('myApp').directive('datepickerPopup', function (dateFilter, datepickerPopupConfig) {
return {
restrict: 'A',
priority: 1,
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
var dateFormat = attr.datepickerPopup || datepickerPopupConfig.datepickerPopup;
ngModel.$formatters.push(function (value) {
return dateFilter(value, dateFormat);
});
}
};
});
When date was changed by datepicker afterwards, datepicker itself handled any date formatting :)
Thanks to #camden_kid for providing the link! :)
Related
First off i just want to say i have just started with Angular so all this is really new to me. I don't even know if what i am setting up is done in the right way.
What i am trying to do is to Pass a date value after i have chosen it in the datetimepicker back to my angular controller so that i can process it.
the problem i have is that when i choose the date (i can clearly see what i have chosen through a alert poping up displaying it on.change) i can't pass the value through either ng-model attribute in the input tag nor with ng-click after storing the date value in a variable.
i want the date to be passed to a $scope.chosenDate = ''; as a string, or something like that, in the Angular Controller.
I am Using the: DateTimePicker Bootstrap 3 - minimal setup version:
DateTimePicker Bootstrap 3
Here is the datetimepicker:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From</lable>
<div class="form-group" style="margin-bottom: 5px !important;">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var dateToPass;
$(document).ready(function dateFunction() {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD hh:mm'
});
$('#datetimepicker1').on("dp.change", function () {
var selectedDate1 = $("#datetimepicker1").data('date').toString();
var dateToPass = selectedDate1.toString();
alert("Date is set to: " + selectedDate1);
alert("The Date To Pass: " + dateToPass)
});
});
</script>
1) You are doing wrong way. Select any angular js supported date picker
https://github.com/720kb/angular-datepicker
2) Angular js support two way binding. please read more about two way binding. and then you are good to start with variables in angular js
http://www.w3schools.com/angular/angular_databinding.asp
So i got this to work but i got to use another Datetimepicker.
I used the: dalelotts/angular-bootstrap-datetimepicker
Worked like Magic!
You can access the data by adding model variable.
<input type='text' class="form-control" ng-model="data.date" />
in your controller, you can access it through $scope.data.date.
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
Note: I checked it in SO and could not find any Question/Response that help related to this issue. Please guide me if it already exists.
I am using Angular Bootstrap's ui-datepicker library.
I am currently embedding the calender on the page. I am using angular.js, Bootstrap.css
Highlight today's date by default
Select another date will highlight the selected date. But, losing the highlight for the today's date.
Disable the previous dates in the respective month.
Here is the sample code:
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
</div>
</div>
Here is the Link to Plunkr
Any suggestions (regarding highlight today date when i select another date) will be appreciated.
You can use custom-class(date, mode) attribute. You actually already use it in your plunker. In this attribute you can include an expression that will return a custom class based on passing date and mode.
In your case you correctly define this attribute in datepicker element:
<datepicker ng-model="dt" min-date="minDate"
show-weeks="true" class="well well-sm"
custom-class="getDayClass(date, mode)"></datepicker>
You just have to change getDayClass function and make it do what you want to do: return a css class that highlights current date's button no matter what date is selected in datepicker.
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
var currentDay = new Date().setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return 'highlight-current-date';
}
}
return '';
};
Of course, add highlight-current-date class to you css file.
.highlight-current-date button {
background: aqua;
}
Check updated plunker here.
I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated
If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.
I've got this angular datepicker
<input type="text" bs-datepicker data-start-date="01/10/13" data-end-date="29/04/14" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />
(At the moment I've put in hard coded start and end dates just to test the functionality out. Later I will put in an Angular expression)
Now, this part data-start-date="01/10/13" data-end-date="29/04/14" correctly only displays the dates between 1st October 2013 and 29 April 2014 in the calendar control but the problem is none of those dates is selectable. I can still type in the textbox though. Why are they not selectable?
It seems that the the start date and the end date should be more specific, as well as the options being data-min-date and data-max-date. Your start and end date code should be data-min-date="10/01/2013" data-max-date="04/29/2014". The full line will be
<input type="text" bs-datepicker data-min-date="10/01/2013" data-max-date="04/29/2014" placeholder="Earliest date" id="BoundaryFrom" name="BoundaryFrom" ng-model="chartData.boundary.min" data-date-format="d M yyyy" />
Also, I think the format of the date for that would be "mm/dd/yyyy" instead of "dd/mm/yyyy" like you originally did.
Here is a plunker of working code. The calendar only allows selected dates between 1st October 2013 and 29 April 2014. I hope this helps!!!
edit: fixed a typo. Also, an upvote or accepted answer would be awesome :)