AngularStrap data-start-date not allowing date selection - javascript

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 :)

Related

Click a aria-label element using xpath

I am unable to click a button using Xpath and Selenium, in this case the aria-label has a unique date which make it perfect to distinguish among some other buttons from a calendar.
This is the HTML code for the button that display the day 5 and the
price for that day.
<button type="button" class="CalendarDay__button" aria-label="Choose sunday, february 4 2018 as your check-in date. It's available." tabindex="0"><div class="calendar-day"><div class="day">4</div><div class="flybondi font-p fare-price"><span>$728*</span></div></div></button>
<button type="button" class="CalendarDay__button" aria-label="Choose monday, february 5 2018 as your check-in date. It's available." tabindex="0"><div class="calendar-day"><div class="day">5</div><div class="flybondi font-p fare-price"><span>$728*</span></div></div></button>
#Let say I want to click february 5 2018, I tried
dtd0_button = driver.find_element_by_xpath("//button[contains(#class, 'CalendarDay__button') and (#aria-label, 'Choose monday, February 5 2018 as your check-in date. It's available') ]")
dtd0_button.Click()
what is wrong with this approach and I receive the following message 'WebElement' object has no attribute 'Click' if I can Click for any date in the calendar on the web page.
There are a couple of errors with your xpath, which make it invalid:
First of all, you have to state contains before each condition:
"//button[contains(#attribute1, \"content1\") and contains(#attribute2, \"content2\")]"
The ' inside your xpath isn't escaped. Try the following:
"//button[contains(#class,\"CalendarDay__button\") and contains(#aria-label,\"Choose monday, february 5 2018 as your check-in date. It's available.\")]"
Hope it helps. Good luck!

Jquery datepicker - year then month then day

I am trying to use datepicker by http://foundation-datepicker.peterbeno.com/example.html to get the user to select a date.
The datepicker has a really nice year-picker and month-picker format instead of using the arrows, it has a nice selector.
year-picker
the only way to access the year picker I can tell is to click on the year at the top, however I want this to show first on default. once the user selects the year, then allow them to select the month using the month-picker
[month-picker][2] - 2: i.stack.imgur.com/CiIgU.png (i am unable to post more than 2 links currently as I am new to stackoverflow but here is the intended screenshot - same as below...)
I want them to first select the year, then the month, then day. However all the examples I see I don't see how to set all three beginning with year.
then finally the default day picker
[day-picker][3] - 3: i.stack.imgur.com/p3re2.png
Alternatively if the above is not possible could allow the user to select 3 separate times with 3 different datepickers - one for year, month, and day. I can get the month-picker only working with the following (but not the year picker):
<div class="row collapse date" id="dpMonths" data-date-format="mm/yyyy" data-start-view="year" data-min-view="year" style="max-width:200px;">
<div class="small-2 columns">
<span class="prefix"><i class="fa fa-calendar"></i></span>
</div>
<div class="small-10 columns">
<input size="16" type="text" value="02/2012" readonly>
</div>
<script>
$(function(){
$('#dpMonths').fdatepicker();
});
</script>
Is this possible?
There is tons of examples on this page, but if i try modify any of them it either breaks or doesnt do what I need it to do...
Kind regards,
Dave
The examples on the website above are not correct. I have managed to find the answer in one of the commits after much searching. Hopefully this answer may assist someone else.
$('.monthpicker').fdatepicker({
format : 'mm/yyyy',
startView : 1,
minView : 1
});
The views are numbered go up so 4 = year etc.
To select date going through year -> month -> day:
$('.monthpicker').fdatepicker({
format : 'mm/yyyy',
startView : 4,
minView : 2
});

How to set defaultDate in local time using a UTC value from a hidden field in eonasdan-datetimepicker?

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?

Bootstrap datepicker format not working on initialization

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! :)

Working with Jquery timeago plugin

I am working with Timeago plugin.
What can I do in order to us this kind of timestamp 2012-03-14 22:17:48?
Also
Javascript new Date() gives me Thu Mar 14 2012 23:24:51 GMT-0600 (MDT) which is my correct time.
I have the following for Timeage:
<abbr class="timeago" title="2012-03-14T22:17:48Z"></abbr>
Yet it is telling me it was posted "a day ago", which is actually about an hour and 7 minutes... What could be going wrong?
I used easy date it works great
add script easydate-0.2.4.js
then include
<abbr class="easydate">
#Model.LastseenDate
</abbr>
If you use Livestamp.js, you can do something like this:
<abbr class="livestamp"></abbr>
<script>
$('.livestamp').livestamp(new Date('2012-03-14 22:17:48'));
</script>

Categories

Resources