JQuery-UI Datepicker challenges

Hi

I am using JQuery-UI Datepicker (Pharo 4) as follows:

targetDate is a variable of Date class and I need to display in format dd/mm/yyyy)

    html textInput
        value: ( targetDate isNil ifFalse: [ targetDate printFormat: #(1 2 3 $/ 1 1 2) ] );
        callback: [ :value | targetDate isNil
                ifFalse: [
                        targetDate := ( Date readFrom: value pattern: 'dd/mm/yyyy' ) ] ];
        script: (html jQuery new datepicker
                dateFormat: 'dd/mm/yy';
                onSelect: ( html jQuery ajax serializeThis ) ) .

I am not finding the behavior very smooth - so overall is the right way to use
Is there a validation available to check if the string entered by the user is a valid date - the user may enter only 1 digit for dd and mm unless there is a template to ensure leading 0's

are there any other datepicker widgets that could be a good options

thanks
Sanjay

Sorry ... a bit of an error , correct code below (earlier I was checking if the targetDate was nil in the callback

need help as I will be using date fields very heavily

Sanjay Minni wrote

Hi

I am using JQuery-UI Datepicker (Pharo 4) as follows:

targetDate is a variable of Date class and I need to display in format dd/mm/yyyy)

    html textInput
        value: ( targetDate isNil ifFalse: [ targetDate printFormat: #(1 2 3 $/ 1 1 2) ] );
        callback: [ :value | value isNil
                ifFalse: [
                        targetDate := ( Date readFrom: value pattern: 'dd/mm/yyyy' ) ] ];
        script: (html jQuery new datepicker
                dateFormat: 'dd/mm/yy';
                onSelect: ( html jQuery ajax serializeThis ) ) .

I am not finding the behavior very smooth - so overall is the right way to use
Is there a validation available to check if the string entered by the user is a valid date - the user may enter only 1 digit for dd and mm unless there is a template to ensure leading 0's

are there any other datepicker widgets that could be a good options

thanks
Sanjay

I would guess there is not validation code.  Some browsers have native validation functions if you use the HTML5 date input rather than a plain text input.

I think you will find it easier to debug if you do move the code in the callback: block into its own method, then you won't have to rerender the datepicker every time you want to test your validation code.

So instead of:

callback: [ :value | targetDate isNil
                ifFalse: [
                        targetDate := ( Date readFrom: value pattern: 'dd/mm/yyyy' ) ] ];


use


callback: [:value | self setTargetDate: value];


then in the method #setTargetDate: you can start with the code in the callback block and re-work it until you get what you want.  

I'd start by changing from  #readFrom:pattern: to the more general #readString:  but ymmv....

Sanjay Minni wrote

Hi

I am using JQuery-UI Datepicker (Pharo 4) as follows:

targetDate is a variable of Date class and I need to display in format dd/mm/yyyy)

    html textInput
        value: ( targetDate isNil ifFalse: [ targetDate printFormat: #(1 2 3 $/ 1 1 2) ] );
        callback: [ :value | targetDate isNil
                ifFalse: [
                        targetDate := ( Date readFrom: value pattern: 'dd/mm/yyyy' ) ] ];
        script: (html jQuery new datepicker
                dateFormat: 'dd/mm/yy';
                onSelect: ( html jQuery ajax serializeThis ) ) .

I am not finding the behavior very smooth - so overall is the right way to use
Is there a validation available to check if the string entered by the user is a valid date - the user may enter only 1 digit for dd and mm unless there is a template to ensure leading 0's

are there any other datepicker widgets that could be a good options

thanks
Sanjay