I've got the AngularUI Datepicker hooked up and it works well enough except that when you select a different date on the calender, it resets the time portion of the ISO date attached to it via the ngModel attribute. How can I set it up so it keeps the time?
I solved my problem by fleshing it out in a directive.
input(ng-model="event.date_started", j-datepicker)
div(ng-model="event.date_started", j-datepicker)
.directive 'jDatepicker', ->
require: 'ngModel'
link: (scope, elem, attrs, ngModel) ->
# check if elem is an input so when the input
# gains focus it doesn't spawn another calender
if not elem.is('input')
elem.datepicker
onSelect: (dateText) ->
# get the original ISO date and new date
oldDate = new Date ngModel.$modelValue
newDate = new Date dateText
# set the new month and day onto the original ISO date
oldDate.setUTCMonth newDate.getUTCMonth()
oldDate.setUTCDate newDate.getUTCDate()
scope.$apply () ->
# update the model with the new info
ngModel.$setViewValue oldDate.toISOString()
ngModel.$render = () ->
date = new Date ngModel.$viewValue
# set the default highlighted date on the calender
elem.datepicker 'setDate', date
# this renders the date value on the
# input element in the format I want
elem.val date.toDateString()
Related
I have an application which allows the customer to set the date format by setting screen.
I change the current thread culture date format, and set the date and parsing format in the kendo date picker.
DateTimeFormatInfo datetimeFormat = new DateTimeFormatInfo();
datetimeFormat.FullDateTimePattern = "MM.dd.yyyy hh:mm tt"; //(set static for testing)
Thread.CurrentThread.CurrentCulture.DateTimeFormat = datetimeFormat;
My problem is when I change the date format a client side validation error returns says that the field should be a date.
I tried to set custom rule in the kendo validator but that not helps me because when I change the date this rule not fired.
$("myForm").kendoValidator(
{
rules: {
dateValidation: function(input)
{
if (input.is("[data-role=datepicker]")) {
// My code should be here
}
return true;
}
}});
Anyone can help me to solve this issue.
There is no need to add custom rule you need to set the custom format in the kendo validator as following:
kendo.ui.validator.rules.mvcdate = function (input) {
return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") !== null;
}
This code will return true (valid) if the date picker has a value and the value is in the correct format (dd/MM/yyyy in the above)
I need t use the CQ5 xtype 'datefield' since I need only the date and not time tombe entered by the author.
But the issue is that 'datefield' saves the date in JCR as a String and not as a timestap [ as it does when 'datetime' is used.]
Is there a work around to save the date as a timestamp ?
I don't think it is possible to save the date as timestamp using datefield, without meddling with the default script. But as a workaround, you can use datetime and set the property hideTime to true, to hide the time part, so that the author will not be able to author it.
The json for the config is shown below.
{ "fieldLabel":"Date",
"xtype":"datetime",
"hideTime":true,
"name":"./date",
"defaultValue":"now",
"jcr:primaryType":"cq:Widget"
}
You can add defaultValue to 'now', if you want current date to be initialized as the default, if not explicitly filled in by the author, else it can be ignored.
NOTE: The defaultValue: 'now' doesnt work for me in IE (i am using IE 11 and emulating the previous versions through dev tools), but it works fine in Chrome and Mozilla.
A rough workaround for your jsp:
<%#page import="java.text.SimpleDateFormat,java.util.Date"%>
<%
SimpleDateFormat displayDateFormat = new SimpleDateFormat("dd MMM yyyy");
String dateField = properties.get("nameofdatefield", "");
SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yy");
Date formattedDate = sdf.parse(dateField);
String formattedDateStr = displayDateFormat.format(formattedDate);
out.println('Example of formated string'+formattedDateStr);
%>
From the above, you can also convert it to a Date Object, depending on what you wish to manipulate.
Let me know if the above example helps
In a view panel, I have one col that is displayed as HTML because I am pointing to documents created with a traditional form. So, I can't set the "Display type" to anything except a String. I've tried to convert the value by using toJavaDate, but that didn't work.
Here is the formula for my HTML column where rowData is the var or view panel. myserver/folder/myapp.nsf part I changed so that I could paste it here...
if (!rowData.isCategory())
var disp = rowData.getColumnValue("PayPeriod");
"<a href='https://myserver/folder/myapp.nsf/0/"+rowData.getUniversalID()+"?OpenDocument'>"
+disp+"</a>"
The link works properly in my view, but the value displayed shows a full date & time value (6/15/13 8:51 AM). All I am trying to do is display it as 06/15/2013 (MM/DD/YYYY)
if the column is set to date you could use this to get the correct date format
if (!rowData.isCategory())
var formatter
if(viewScope.formatter){
formatter=viewScope.formatter
}else{
formatter = new java.text.SimpleDateFormat( "MM/dd/yyyy" );
viewScope.formatter=formatter
}
var d = rowData.getColumnValue("PayPeriod");
var disp=formatter.format(d)
"<a href='https://myserver/folder/myapp.nsf/0/"+rowData.getUniversalID()+"?OpenDocument'>"
+disp+"</a>"
I am using liferay-ui datepicker.
When my page loads the date is current date in the datepicker and data of the current date is loaded on the page.
What I want to do is allow the user to view data such that when user selects any other date, data of the selected date is dispayed.
How should I go about this?
SHould I refresh the entire page? how?
Or should I use ajax? how should i go about? if ajax is to be used how should i pass the data?
EDIT:
I will explain my problem in detail. I am using liferay:ui:date . I want user to select a date from it. Once the user selects date, I want to pass the date to custom-sql. I am calling the finder function in the same jsp as follows:
List<Object[]> ObjdisplayAttListName = AttendanceLocalServiceUtil.findAttendance(currentdate);
I want to pass the user selected date in the above function.
Right now what I am doing is only passing the current date in the above line of code. Iwant to pass the user selected date.
I think you should go with AJAX. Make ajax call when you select date using date-picker
and get that date in your serveResource method. Based on your selected date fetch data and pass that data to your presentation layer in required format i.e JSON.
Collect data and display it. Thats it :)
Let me know if you have problem !!
Personally, I prefer working with liferay-ui:input-date. Just make sure to keep a Date or Calendar object in your Controller Class
<portlet:actionURL var="setDate" name="setDate" >
<portlet:param name="jspPage" value="/html/yourPage.jsp" />
</portlet:actionURL>
<aui:form action="<%= setDate%>" method="post" enctype="multipart/form-data" >
<%
Date date = (Date)renderRequest.getAttribute("_a_date");// Get your Date from the controller
Calendar cal = CalendarFactoryUtil.getCalendar();
cal.setTime(new Date()); // create with current date if this form is presented for the 1st time
if(Validator.isNotNull(date)){
cal.setTime(date); // else use the Date you want to display
}
%>
<liferay-ui:input-date
yearRangeStart="1970"
yearRangeEnd="2100"
formName="pickedDate"
dayParam="dd"
monthParam="mm"
yearParam="yy"
dayValue="<%= cal.get(Calendar.DATE) %>"
monthValue="<%= cal.get(Calendar.MONTH) %>"
yearValue="<%= cal.get(Calendar.YEAR) %>"
/>
<aui:button name="setDateBtn" value="Submit that date" type="submit"/>
</aui:form>
Back to the controller..
public void setDate(ActionRequest actionRequest,
ActionResponse actionResponse) throws IOException, PortletException {
UploadPortletRequest queryRequest = PortalUtil.getUploadPortletRequest(actionRequest);
int dd = ParamUtil.getInteger(queryRequest, "dd");
int mm = ParamUtil.getInteger(queryRequest, "mm");
int yy = ParamUtil.getInteger(queryRequest, "yy");
String date_format = "yyyy/MM/dd";
SimpleDateFormat sdf = new SimpleDateFormat(date_format);
GregorianCalendar gc = new GregorianCalendar(yy, mm, dd);
Date date = gc.getTime(); // Keep this Date and reload the page sending this Date in an actionRequest param
actionRequest.setAttribute("_a_date", date );
I have a problem related to Date type which I'm using in smartgwt.
I set up the date to have the possibility to change it manually:
setAttribute("useTextField", true);
In Firefox and Chrome (and maybe other browsers , except Internet Explorer) if first I'm selecting a date with that pop-up calendar and than change it manually and then let the focus on the date field and going to save the document (actually is a form with multiple fields) the date changed manually it is lost, the date choosed from calendar it is saved. This is not happening in Internet Explorer.
In all browsers, if I select from Calendar a date and than change it manually and change the focus from it everythings goes fine - the manually changed date it is saved into db.
Need some advices.
Thank you a lot.
Later edit:
I'm using com.smartgwt.client.widgets.form.fields.DateItem widget.
DateItem date = new DateItem("A date");
date.setWidth(320);
date.setWrapTitle(false);
date.setAttribute("useTextField", true);
date.setAttribute("inputFormat", "yyyy/MM/dd");
date.setAttribute("displayFormat", "toJapanShortDate");
I'm adding this date on a DynamicForm:
DynamicForm form = new DynamicForm();
form.setFields(date);
and this form on a VLayout object:
VLayout editLayout = new VLayout(30);
editLayout.addMember(form);
The problem is reproducing in browsers like Firefox & Chrome when:
I'm selecting first the date from calendar - say I'm selecting 2011/02/11
I'm changing the day in 2011/02/12 manually - and I'm not changing the focus from this date field
I'm pressing the 'Save' button.
After these steps the date is 2011/02/11 and not 2011/02/12 how it should be.
In Internet Explorer browser did not happen - the date after the steps above is 2011/02/12!
Later edit:
I'm using a DataSource for updating the data.
I'm having a UserObject and in the userUpdate method I'm creating this user object first with values from fields (which are on the DynamicForm) - by calling the generateUserObjectFromForm() method
UserObject user = generateUserObjectFromForm();
Here, in this method I'm doing something like:
user.setAddedDate(date.getValueAsDate()),
but here the date.getValueAsDate() value is the one selected from calendar, not the one modified manually.
I've tried also with:
date.getValue() //Fri Feb 11 00:00:00 GMT+200 2011
date.getValueField() // null
date.getValueAsDate() //Fri Feb 11 00:00:00 GMT+200 2011
date.getDisplayField() //null
date.getDisplayValue()//l2011/02/11
but none worked properly.
I'm using an request object (UserUpdateRequest) for updating the user.
UserUpdateRequest looks like:
public class UserUpdateRequest implements IsSerializable
{
UserObject user = null;
public UserUpdateRequest ()
{
}
public UserUpdateRequest (UserObject user)
{
this.user = user;
}
public UserObject getUser ()
{
return user;
}
}
final UserUpdateRequest request = new UserUpdateRequest(user);
and on the RPC user update method I'm sending this UserUpdateRequest request.
Later edit (15 february):
I've discovered why is happening this issue related to focus, and this is because in the project I'm not using a Button object - and a com.google.gwt.event.dom.client.ClickEvent for it. I'm using a personalized widget:
package de.vogella.gwt.helloworld.client;
import com.smartgwt.client.widgets.Label;
public class buttonLabel extends Label
{
public buttonLabel (String text, String elementID)
{
super();
setContents(text);
setAutoWidth();
setBaseStyle("wwHoverLabel");
setShowRollOver(true);
}
}
and this use com.smartgwt.client.widgets.events.ClickHandler().
Anyway I do not know how to resolve this ....
I've created a small project with this issue where I've put also a Button object (Save1) and also a personalized button buttonLabel (Save2) - both with clickhandlers.
Here is the link where you can download sources of this small project I've created: link
Case1:
say for example we choose date 2011/02/16 and we change manually the date into 2011/02/17 and push the button Save1 - everything works fine - the date remains 2011/02/17
Case2-a - line
Window.alert("2 " + date.getValue()); un-commented:
say for example we choose date 2011/02/16 and we change manually the date into 2011/02/17 and push the button Save2 - in the warning message date value is 2011/02/16 but in the field date remains 2011/02/17
Case2-b - line
Window.alert("2 " + date.getValue()); uncommented:
say for example we choose date 2011/02/16 and we change manually the date into 2011/02/17 and push the button Save2 - the value from field date is automatically changed to 2011/02/16
Later later edit:
Since I can't figure out how to solve my problem I'm thinking for the moment at a temporary solution.
So, I have:
DateItem date = new DateItem("Adate");
date.setWidth(120);
date.setWrapTitle(false);
date.setAttribute("useTextField", true);
date.setAttribute("inputFormat", "yyyy/MM/dd");
date.setAttribute("displayFormat", "toJapanShortDate");
Because the attribute useTextField is set to true we can see the text entry field. How can I make this text entry field to be un-editable. Actually I want to have only the possibility to choose the date from calendar and not to change it manually.
The following code should work.
DateItem date = new DateItem("Adate");
date.setAttribute("useTextField", true);
date.setAttribute("inputFormat", "yyyy/MM/dd");
date.setAttribute("displayFormat", "toJapanShortDate");
TextItem textItem = new TextItem();
textItem.setAttribute("readOnly", "true");
date.setTextFieldProperties(textItem);