Disable of date in DatePicker doen't works - gwt

I am trying to disable all the date in the DatePicker GWT component, here is my sample of code :
datePicker.addShowRangeHandler(new ShowRangeHandler<Date>() {
public void onShowRange(ShowRangeEvent<Date> event) {
System.out.println("First date : " + event.getStart());
System.out.println("Last date : " + event.getEnd());
System.out.println("First date from date picker : " + datePicker.getFirstDate());
System.out.println("Last date from date picker : " + datePicker.getLastDate());
// Disable all the date shown by the Calendar
List<Date> dateList = new ArrayList<Date>();
Date currentDate = event.getStart();
while(!currentDate.after(datePicker.getLastDate())) {
Date updateDate = CalendarUtil.copyDate(currentDate);
dateList.add(updateDate);
CalendarUtil.addDaysToDate(currentDate, 1);
}
for(Date date : dateList) {
System.out.println("Date selected : " + date);
System.out.println("date visibility : " + datePicker.isDateVisible(date));
}
}
});
Date visibility is always false , it keep telling me that all the date are not visible, but it should be true since it' between the first date and last date, anybody know a way to disable date in calendar?, so if tried the method setTransientOnEnables() on the datePicker for any of the date I keep getting an exception as the date arenot visible.
I had tried also impleenting my own DefaultClendarView but it requires protected class which is not available by GWT.

I had similar problems. I was trying to disable dates in the future.
I eventually found out that start and end dates are final variables. When I tried to change the start date, I got undefined behavior (In some cases my browser freezed completely.). The solution was to copy the start date and manipulate the copy instead of the start date directly..
This is what I ended up with:
datePicker.addShowRangeHandler(new ShowRangeHandler<java.util.Date>()
{
#Override
public void onShowRange(ShowRangeEvent<Date> event)
{
Date start = event.getStart();
Date temp = CalendarUtil.copyDate(start);
Date end = event.getEnd();
Date today = new Date();
while(temp.before(end))
{
if(temp.after(today) && datePicker.isDateVisible(temp))
{
datePicker.setTransientEnabledOnDates(false,temp);
}
CalendarUtil.addDaysToDate(temp, 1);
}
}
});
This should work in GWT 2.4. Earlier versions are not tested.

Related

JavaFx Calendar Picker Api JFXTras

Here I created the calendar picker by using JFXtras API and here I am getting events from Spring rest web service and highlighting the calendar dates by using highlight observable list.
But here my requirement is what ever the highlighted date if we click then we have to show the events on that date,to do that i wants to get the date from calendar picker,but what listener i want to use to get the selected date.
CalendarPicker calendarPicker = interfaceHandler.getCalendarPicker();
calendarPicker.setMode(Mode.MULTIPLE);
ObservableList<Calendar> calendars = calendarPicker
.highlightedCalendars();
if (listOfEvents != null && listOfEvents.size() > 0) {
for (Events events : listOfEvents) {
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(
"MM/dd/yyyy");
Date date = events.getEventDate();
System.out.println("+"
+ simpleDateFormat.format(events.getEventDate()));
Calendar cal = Calendar.getInstance();
cal.setTime(date);
int year = cal.get(Calendar.YEAR);
int month = cal.get(Calendar.MONTH);
int day = cal.get(Calendar.DAY_OF_MONTH);
System.out.println("+=year" + year);
Calendar gc = new GregorianCalendar(year, month, day);
simpleDateFormat.setCalendar(gc);
calendars.add(gc);
System.out.println("The Size=" + calendars.size());
// DatePicker
}
}
//calendarPicker
// calendarPicker.setCalendarRangeCallback(value,calendar);
System.out.println("+=" + calendars);
System.out.println(calendarPicker.displayedCalendar());
CalendarPickerControlSkin calendarPickerControlSkin = new CalendarPickerControlSkin(
calendarPicker);
calendarPickerControlSkin.setShowWeeknumbers(ShowWeeknumbers.NO);
calendarPicker.setSkin(calendarPickerControlSkin);

How to test a Angular js date picker from Protractor

I'm new to Protractor and here I'm trying to test an angularjs date picker from Protractor.
I tried to find a way to do this and this article was the only thing I found and It is not very clear to use
If someone know how to test please help.
What I need is to select today's date.
Thanks in advance :)
edit -
alecxe, here is the screen shot of my date picker. Unfortunately cannot provide the link of the page. :(
<input
class="form-control ng-pristine ng-valid ng-not-empty ng-touched"
ng-model="invoice.fromdate"
data-date-format="yyyy-MM-dd"
data-date-type="string"
data-max-="" data-autoclose="1"
bs-datepicker=""
ng-change="dateRange()"
type="text">
I think you can avoid manipulating the datepicker manually and instead set the date either by just sending the keys with a today's date value:
var picker = element(by.model("invoice.fromdate"));
// get today's date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = mm+'/'+dd+'/'+yyyy;
picker.clear();
picker.sendKeys(today);
Or, by setting the associated model's value directly:
picker.evaluate("invoice.fromdate= '" + today + "'");
Two methods have been suggested so far: 1. sendKeys() 2. evaluate()
I'm a bit new to protractor but I think both of these have issues in the case of not having an input element that spawns the calendar, i.e.:
Sendkeys() works only if date is on an element and the uib-datepicker is a dropdown sort of deal. This didn't help me because my datepicker element is a standalone and isn't paired with an input element.
evaluate() doesn't update angular's actual model in the browser (which begs the question of how useful evaluate actually is...). According protractor docs, evaluate, "Evaluates the input as if it were on the scope of the current underlying elements." In my case I want to test whether the date generated by the datepicker gets to my enpdpoint via a post request and then back again (hence e2e) without getting effed (corrupted), therefore, I need my date to be on my angular model in the browser instance, not just in the browser-driver environment or whatever the runtime environment of the protractor test is. I could be wrong about this.
This expect() passes but the ng-form is invalid (i'm assuming b/c model in browser wan't actually updated to receive the date I'm trying to pass in.):
function convertToPickerDate(date) {
var date = new Date(date);
var dd = date.getDate();
var mm = date.getMonth() + 1; //January is 0!
var yyyy = date.getFullYear();
var yy = yyyy.toString().slice(2);
return mm + '/' + dd + '/' + yy;
}
// expect passes, but form is invalid - DON'T USE for standalone cal
it('should enter start date in date picker', function () {
offerStart = convertToPickerDate(myData.startDate);
var offerStartPicker = element(by.model('current.startDate'));
offerStartPicker.evaluate("current.startDate = '" + offerStart + "'");
offerStartPicker.evaluate("current.startDate").then(function (value) {
expect(value).toBe(offerStart);
});
})
but the ng-form that the element is on is invalid...
My solution uses css selection and arrow keys to select a date relative to today:
Shipment Start Date: <em id="offerStartPrint">{{current.startDate | date:'shortDate' }}</em>
<div id="offerStart"
name="offerStart"
uib-datepicker
ng-model="current.startDate"
class=""
ng-change="setStartDate()"
datepicker-options="startDateOptions"
required></div>
</div>
function convertToPickerDate(date) {
var date = new Date(date);
var dd = date.getDate();
var mm = date.getMonth() + 1; //January is 0!
var yyyy = date.getFullYear();
var yy = yyyy.toString().slice(2);
return mm + '/' + dd + '/' + yy;
}
it('should enter expiration date in date picker using tabs and arrows :)', function () {
// select today element on uib-datepicker calendar
// div#offerStart elem has date model
var calToday = element(by.css('div#offerStart table td button.active'));
calToday.sendKeys(protractor.Key.ARROW_DOWN); // one week away
calToday.sendKeys(protractor.Key.ARROW_DOWN); // two weeks away
calToday.click(); // if you remove this click no date is entered
var fortnightAway = new Date(Date.now() + 12096e5);
fortnightAwayString = convertToPickerDate(fortnightAway);
expect(element(by.id('offerStartPrint')).getText()).toBe(fortnightAwayString);
})
Left and right arrows can be used to increment/decrement date by one day at a time.
up/down arrows can be used to inc/dec one week at a time.
One could probably figure out how to arrow through months and years as well.
var data_picker = element(by.model("invoice.fromdate"));
// select current date with date function
var current_date = new Date();
var day = today.getDate();
var month = today.getMonth()+1; //By default January count as 0
var year = today.getFullYear();
if(day<10) {
day='0'+day
}
if(month<10) {
month='0'+month
}
current_date = month+'/'+day+'/'+year;
data_picker.clear(); // Note if you are facing error message related to clear. Comment this line
data_picker.sendKeys(today);
Hope this will work

How to extract day, month, and year from date returned by QML Calender?

The Calendar clicked signal returns a date as follows:
2015-11-13T00:00:00
However, I would like to have a date formatted like this:
Fri Nov 13 2015
This is what I tried:
onSelectedDateChanged:
{
calender.visible = false;
selectedDate = selectedDate.toLocaleTimeString(Qt.LocalDate, Locale.ShortFormat);
textOfSelectedDate.text = Date.fromLocaleTimeString(Qt.LocalDate, selectedDate, Locale.ShortFormat)}
}
textOfSelectedDate is the id of the text box where this date will be displayed.
How can I extract day, month, and year in a desired format from Date returned by Calender?
QML's date type extends Javascript's Date. Thus you can do:
onSelectedDateChanged: {
const day = selectedDate.getDate();
const month = selectedDate.getMonth() + 1; //assuming you want 1..12, getMonth()'s return value is zero-based!
const year = selectedDate.getFullYear();
...
}
First of all, date is similar to JS date type. So you can use all its functions, like getDate() etc. See it here
Also, you can use Qt.formatDate() object to format the result. In your case it can be as follows:
onClicked: {
console.log(Qt.formatDate(date,"ddd MMM d yyyy"))
}

How to select a calendar week in SAPUI5?

I am searching for a way to select just a calendar week with a DatePicker.
Is there a way to configure that control in a way, that it allows to pick a week and sends a DateTime element out of this week?
I detected the following entry with a list of format options, but week formatting seems not working:
http://scn.sap.com/community/developer-center/front-end/blog/2013/04/28/working-with-odata-dates
This code seems not working:
new sap.m.DatePicker({
value : {
path : "DateTime",
type : new sap.ui.model.type.Date({pattern: "w yy"})
}
}),
The binding is to OData property DateTime of type Edm:DateTime
Few things to be noticed:
Though SAPUI5 says it supports weeks in year, it doesn't currently! //I tested
why? in DateFormat.js file of SAPUI5
case "weekInYear":
sWeek = "";
//TODO getWeek does not exist on Date object
//-> this is a preparation for a future or custom week support
if (oDate.getWeek) {
sWeek += oDate.getWeek();
}
aBuffer.push(jQuery.sap.padLeft(sWeek, "0", oPart.iDigits));
break;
As you can see, its in TODO list!!
Workaround? Yes :
jQuery.sap.require("sap.ui.core.format.DateFormat");
//define getWeek function
Date.prototype.getWeek = function () {
var d = new Date(+this);
d.setHours(0, 0, 0);
d.setDate(d.getDate() + 4 - (d.getDay() || 7));
return Math.ceil((((d - new Date(d.getFullYear(), 0, 1)) / 8.64e7) + 1) / 7);
};
var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({
pattern: "w y"
});
var oDatePicker = new sap.m.DatePicker({
dateValue: new Date(),
displayFormat: "w y"
})
JSBin code piece is here

GWT date- not allow to select date before start date

I have two dates start date and end date from gwt . I want "not to allow user to select end date before start date in gwt". please help..
You have to check start date while selecting date of end date box, something like
final DateBox startDateBox=new DateBox();
final DateBox endDateBox=new DateBox();
startDateBox.getDatePicker().addValueChangeHandler(new ValueChangeHandler<Date>() {
#Override
public void onValueChange(ValueChangeEvent<Date> event) {
if(endDateBox.getValue()==null)
{
endDateBox.setValue(null);
Window.alert("Please select start date before selecting end date");
}
}
});
I did not check here this code, it should work.