Help with date spinners

[[email protected]]

Hi,

I'm using a date spinner editor to set the date in a field on a formview. This is working fine, but I need the capability of entering a date without a month or day. For example, for the date of manufacture field, the user can enter just a year or just a year and month.

I can add a blank day to the day spinner static data, and I can add a blank month to the month spinner static data. However, in the editor properties, I need to modify the javascript for the "set value in editor" code to accept a null value for a day (eg 00/04/2018) or null value for both day and month (00/00/2018). Below is the code, but I can't work out what I need to change. Would welcome any help from js gurus.

if(typeof {dialog.object}._functions.setDaysInMonth_EDITOR_DATE == 'undefined') { 
	{dialog.object}._functions.setDaysInMonth_EDITOR_DATE = function() {
		//read year and month from the corresponding spinner and then figure out how many days are in that year/mont
		var sYear = {dialog.object}.getControl('EDITOR_DATE_S_YEAR');
		var sMonth = {dialog.object}.getControl('EDITOR_DATE_S_MONTH');
		var sDate = {dialog.object}.getControl('EDITOR_DATE_S_DAY');
		
		if(!sYear || !sMonth || !sDate) return false;
		var year = sYear.value;
		var month = sMonth.value;
		//day is 1 based, month is 0 based. setting the day to 0 gives last day of previous month
		var dInM = new Date(Number(year),Number(month), 0).getDate();
		var dates = [];
		dates.push({html: ' ', value: '0'});
		for(var i=1;i<=dInM;i++) dates.push({html: i, value: i});
		if(sDate.value > dInM) sDate.value = dInM;
		sDate.populate(dates,true);
		sDate.refresh();
	}
}

var sDate = {dialog.object}.getControl("EDITOR_DATE_S_DAY");
var sMonth = {dialog.object}.getControl("EDITOR_DATE_S_MONTH");
var sYear = {dialog.object}.getControl("EDITOR_DATE_S_YEAR");
var d = new Date();

//get the date format of the data in the form (must be the format in which the data is stored - not displayed)
var dfmt = A5.serverSideDateFormat;
if(value != null) d.fromFormat(value,dfmt);


sYear.refresh();
sMonth.refresh();
sYear.setValue(d.getFullYear());
sMonth.setValue(d.getMonth()+1);

if(value == '') { 
	sYear.setValue('0');
	sMonth.setValue('0');
}


{dialog.object}._functions.setDaysInMonth_EDITOR_DATE();
if(value != '') { 
	sDate.setValue(d.getDate());
} else { 
	sDate.setValue('0');
}

[Davidk]

Re: Help with date spinners

You can try the code below... but you're messing with dates so who knows what possible issues may result. Since you're now dealing with an invalid date of 0/0/2018 you can no longer use any date function or method. So... just treat the date as a string (which it is coming into the event) and test it's parts (day and month). If they're 0, then just set their values to zero in the spinners.

This code only adds a test for the day... so you may need to add a month test as well.

This code results in the spinners showing only 2018 for a value of 0/0/2018.

if(typeof {dialog.object}._functions.setDaysInMonth_EDITOR_2 == 'undefined') { 
	{dialog.object}._functions.setDaysInMonth_EDITOR_2 = function() {
		//read year and month from the corresponding spinner and then figure out how many days are in that year/mont
		var sYear = {dialog.object}.getControl('EDITOR_2_S_YEAR');
		var sMonth = {dialog.object}.getControl('EDITOR_2_S_MONTH');
		var sDate = {dialog.object}.getControl('EDITOR_2_S_DAY');
		
		if(sDate.value == '0') return false; // new
		
		if(!sYear || !sMonth || !sDate) return false;
		var year = sYear.value;
		var month = sMonth.value;
		//day is 1 based, month is 0 based. setting the day to 0 gives last day of previous month
		var dInM = new Date(Number(year),Number(month), 0).getDate();
		var dates = [];
		dates.push({html: ' ', value: '0'});
		for(var i=1;i<=dInM;i++) dates.push({html: i, value: i});
		if(sDate.value > dInM) sDate.value = dInM;
		sDate.populate(dates,true);
		sDate.refresh();
	}
}

var sDate = {dialog.object}.getControl("EDITOR_2_S_DAY");
var sMonth = {dialog.object}.getControl("EDITOR_2_S_MONTH");
var sYear = {dialog.object}.getControl("EDITOR_2_S_YEAR");
var d = new Date();





//get the date format of the data in the form (must be the format in which the data is stored - not displayed)
var dfmt = A5.serverSideDateFormat;

var currDate = value.split("/");// new
if(currDate[0] !="0"){ //new

	if(value != null) d.fromFormat(value,dfmt);
	
	
	sYear.refresh();
	sMonth.refresh();
	sYear.setValue(d.getFullYear());
	sMonth.setValue(d.getMonth()+1);
	
	if(value == '') { 
		sYear.setValue('0');
		sMonth.setValue('0');
	}
	
	
	{dialog.object}._functions.setDaysInMonth_EDITOR_2();

	if(value != '') { 
		sDate.setValue(d.getDate());
	} else { 
		sDate.setValue('0');
	}
	
}else{
	sDate.setValue('0');//new
	sMonth.setValue('0');//new
	sYear.setValue(currDate[2]);//new
}

[[email protected]]

Re: Help with date spinners

Must be doing something wrong....I changed the date to a string and added the new lines as per above, but still the behaviour is the same. If I select '0' for the day in the date spinner, it will save it as the last day of the previous month (eg 00/03/2018 selected, but 28/02/2018 is saved to the field).

This is what I have in the set editor code:

if(typeof {dialog.object}._functions.setDaysInMonth_EDITOR_DATE == 'undefined') { 
	{dialog.object}._functions.setDaysInMonth_EDITOR_DATE = function() {
		//read year and month from the corresponding spinner and then figure out how many days are in that year/mont
		var sYear = {dialog.object}.getControl('EDITOR_DATE_S_YEAR');
		var sMonth = {dialog.object}.getControl('EDITOR_DATE_S_MONTH');
		var sDate = {dialog.object}.getControl('EDITOR_DATE_S_DAY');

		if(sDate.value == '0') return false;
		
		if(!sYear || !sMonth || !sDate) return false;
		var year = sYear.value;
		var month = sMonth.value;
		//day is 1 based, month is 0 based. setting the day to 0 gives last day of previous month
		var dInM = new Date(Number(year),Number(month), 0).getDate();
		var dates = [];
		dates.push({html: ' ', value: '0'});
		for(var i=1;i<=dInM;i++) dates.push({html: i, value: i});
		if(sDate.value > dInM) sDate.value = dInM;
		sDate.populate(dates,true);
		sDate.refresh();
	}
}

var sDate = {dialog.object}.getControl("EDITOR_DATE_S_DAY");
var sMonth = {dialog.object}.getControl("EDITOR_DATE_S_MONTH");
var sYear = {dialog.object}.getControl("EDITOR_DATE_S_YEAR");
var d = new Date();





//get the date format of the data in the form (must be the format in which the data is stored - not displayed)
var dfmt = A5.serverSideDateFormat;

var currDate = value.split("/");
if(currDate[0] != "0") {

	if(value != null) d.fromFormat(value,dfmt);


	sYear.refresh();
	sMonth.refresh();
	sYear.setValue(d.getFullYear());
	sMonth.setValue(d.getMonth()+1);

	if(value == '') { 
		sYear.setValue('0');
		sMonth.setValue('0');
	}

[Davidk]

Re: Help with date spinners

You should put your copied code inside CODE tags... it's a bit tough to read.

I believe you're missing an "else" section at the end of the code.

Also, I'm not sure what you mean by "I changed the date to a string". I didn't do that. The date, coming from a control in Alpha, is a string.

There's a lot of stuff going on with these Editors... I doubt Alpha could have made things more complicated... and overall a very odd way to go. For this reason it's often just a lot of guessing as to what's going on... and so a sample component is usually needed. If you could create a UX and zip it and post it that would be helpful.

Alpha makes changes to the code that gets generated for these Editors. But once that code is generated for a UX... it never gets updated. In the past there have been bugs in the generated code... and those bugs fixed in subsequent versions of Alpha... but the generated code is already in place in your UX... and never gets changed. To get a bug fix for an Editor you need to delete the Editor and re-generate it. It's quite awful.

[[email protected]]

Re: Help with date spinners

I meant I changed the datatype in the db from date to varchar.
I have the "else" section there, it just got cutoff when I did the copy and paste into my reply.
Also wondering if this section of code needs to be modified:

//day is 1 based, month is 0 based. setting the day to 0 gives last day of previous month
var dInM = new Date(Number(year),Number(month), 0).getDate();

Cheers,
Greg

[Davidk]

Re: Help with date spinners

I feel there's going to be more to this than just changing code. I was only looking at the client side issues at this point. Your change of the table field from date to varchar could have other consequences.

As a date field you would not be able to accommodate 0/0/2018... or anything with a value of zero. Changing from date to varchar unleashes a whole new set of problems... because everything that you've probably built so far... and touches that date field... is expecting a date.

Modified how? This code...

var dInM = new Date(Number(year),Number(month), 0).getDate();

...is working off string values... which is why Number() is used (turning the string into a Number)... which means that .getDate() can be used. Grabbing part of a date from a control at the client-side will result in a string.

If you want to end up with a varchar value in your field... then there's most likely a lot of stuff will need to change to get you there. Here's what I'm seeing with my changes in place.

http://youtu.be/U4-Rsng0DjU?hd=1

[[email protected]]

Re: Help with date spinners

Here is the link to what I am experiencing:

https://www.dropbox.com/s/stagatkzp5...ssue.webm?dl=0

[Davidk]

Re: Help with date spinners

You'd need to create a sample UX using static data... zip and post it here... and I'll have a look.

Overall... I feel you'd be better served by showing an Editor which has only what you need. If you only need a Year... then show Just a Year control.

[[email protected]]

Re: Help with date spinners

Hi David,

Sorry for the delayed reply (have had some health issues recently).

Sometimes the customer has the full date, so they enter it. Sometimes they only have a year or month/year, so they want the flexibility to enter a year or month/year.

I got a little further with trouble shooting this. Part of the issue is with the 'Get value from editor' code. (you had helped me previously with this, as the out of the box code did not work when the date format is set to dd/MM/yyyy). The problem I found was with the fromDate and toDate functions, as they don't seem to work when you have a 0 for the day or month. Anyway, I modified this code, so now I can select 0 for the day or month in the date spinners, and on saving, it will populate the field in the formview control correctly.

However, when I commit the formview, the date is blanked out, and the column in the table is set to NULL. (I have a 'Save' button which runs the following code):

var result = {dialog.object}.formViewValidate('FORMVIEW_APPRASIAL');
//only commit if there are no form validation errors
if(result){
var flagOnlyCommitDirtyFields = false; //applies only when committing to a List control
{dialog.object}.formViewCommit('FORMVIEW_APPRASIAL',flagOnlyCommitDirtyFields);
{dialog.object}.formViewRefresh('FORMVIEW_APPRASIAL');
{dialog.object}.setDisabled('BUTTON_PHOTOS', false);
}

Any idea what could be causing this ?

Greg

[Davidk]

Re: Help with date spinners

You'd need to post a sample UX with a sample table.

[[email protected]]

Re: Help with date spinners

This is a sample that exhibits the problem. Run test_list in working preview, select a record from the list, then edit the date. When you select a valid date in the date spinners (eg non zero day and month), save the edits and synchronize, the record saves correctly.

If you select a zero day or month, when you sync the record, the data is blanked out.

Greg
test[1].zip

[Davidk]

Re: Help with date spinners

Thanks for the sample UX. You're using DBF files which I feel should be put out of their misery... it is 2018. I imported the Jobs dbf into a database of this century, MySQL, and changed the DATE_OF_JOB field to varchar. You can't use a date type with non-valid dates. Any date with a day or month of 0 is non-valid. That's why nothing is being saved.

Also, your UX is data bound to the Jobs table... which doesn't make sense. You're working with a List Control - bound to Job. And the FormView is bound to the List. No need to have data binding at the UX level.

Because you want to have only and month and year... or just a year... you can't work with a date type at the database level. So... since you're now using varchar... you must make the Editor understand that. In the Editor Set value in editor event... let the default Editor code do it's stuff... and add a bit at the end for your date setup.

if(typeof {dialog.object}._functions.setDaysInMonth_EDITOR_3 == 'undefined') { 
	{dialog.object}._functions.setDaysInMonth_EDITOR_3 = function() {
		//read year and month from the corresponding spinner and then figure out how many days are in that year/mont
		var sYear = {dialog.object}.getControl('EDITOR_3_S_YEAR');
		var sMonth = {dialog.object}.getControl('EDITOR_3_S_MONTH');
		var sDate = {dialog.object}.getControl('EDITOR_3_S_DAY');
		
		if(!sYear || !sMonth || !sDate) return false;
		var year = sYear.value;
		var month = sMonth.value;
		//day is 1 based, month is 0 based. setting the day to 0 gives last day of previous month
		var dInM = new Date(Number(year),Number(month), 0).getDate();
		var dates = [];
		dates.push({html: ' ', value: '0'});
		for(var i=1;i<=dInM;i++) dates.push({html: i, value: i});
		if(sDate.value > dInM) sDate.value = dInM;
		sDate.populate(dates,true);
		sDate.refresh();
	}
}

var sDate = {dialog.object}.getControl("EDITOR_3_S_DAY");
var sMonth = {dialog.object}.getControl("EDITOR_3_S_MONTH");
var sYear = {dialog.object}.getControl("EDITOR_3_S_YEAR");
var d = new Date();

debugger;

//get the date format of the data in the form (must be the format in which the data is stored - not displayed)
var dfmt = A5.serverSideDateFormat;
if(value != null) d.fromFormat(value,dfmt);

sYear.refresh();
sMonth.refresh();
sYear.setValue(d.getFullYear());
sMonth.setValue(d.getMonth()+1);

if(value == '') { 
	sYear.setValue('0');
	sMonth.setValue('0');
}

{dialog.object}._functions.setDaysInMonth_EDITOR_3();
if(value != '') { 
	sDate.setValue(d.getDate());
} else { 
	sDate.setValue('0');
}

var currDate = value.split("/");
sDate.setValue(currDate[0]);
sMonth.setValue(currDate[1]);
sYear.setValue(currDate[2]);

Just the bit at the end is new. Let the Editor do what it normally does... and then set your own values into the spinners. You know the format of your "date string"... so you can parse it into day, month, year... and then use .setValue.

Your example UX Date format property is set at MM/dd/yyyy... but I'd assume you want dd/MM/yyyy.

Your dates in your table will now show as 0/0/2018, for example. And that's how they'll show in the List.

[[email protected]]

Re: Help with date spinners

Hi David,

Thank you. Got this working now as per your advise. Only one issue - I need to check for a null value in case the date is blank. eg:

if(value === null) {
sDate.setValue('0');
sMonth.setValue('0');
sYear.setValue('0');

} else {
var currDate = value.split("/");
sDate.setValue(currDate[0]);
sMonth.setValue(currDate[1]);
sYear.setValue(currDate[2]);
}

1. To answer your questions: yes I am using mySQL. The example I posted was quick & nasty to demonstrate the problem.
2. I had though about changing the date type to varchar (see one of my earlier posts). It was only with further research and as per your advise that I confirmed mySQL won't accept zeros in a date data type.
3. Didn't realise the test UX was bound to a table - probably just historic as I used this test work-space to demonstrate some earlier issues. (the actual 'production' UX is unbound)
4. correct, the date format should be dd/MM/yyyy. (just an oversight in my test UX). I have actually hard coded this in 'Get value from editor' as I mentioed earlier the fromFormat and toFormat functions don't like zeros in the dates.

Cheers,