Editable Datepicker

Webix JS
#1

hi,
I am using editable datepicker of webix,my problem is that when am inputting a wrong date or number input on the textbox ,it is getting corrected to default value after keypress.How can i alert this situation of error. I need to avoid this autocompletion behaviour.And i also need to change the length of year field as 4,How can i do this.
Please provide a solution.
http://s23.postimg.org/gd5ct2mxn/forum.png

#2

And i also need to change the length of year field as 4

Datepicker accepts 4 digit year by default.
Anyway the date format is controlled by format property.
http://webix.com/snippet/6bb8cf02

As for handling the incorrect input. You can use onChange event ( it occurs a bit late though )

#3

Thank you for your snippet.I need to set the ‘nv’ value as the current date and alert(“invalid entry”) message.How can i do that? I am not getting the wrong input at onChange event.

#4

If you need to show the non-date value in the input you need to use plain “text” control. There is no way to show invalid date value in the datepicker.

You can use placeholder though

http://webix.com/snippet/1d861aa1

#5

Hi ,
I am not able to open the code http://webix.com/snippet/1d861aa1 website see any example anybody will help me in this

#6

Hello @shilpa

As far as I can see, the site/snippet tool works correctly now, but here’s the code which is taken from the mentioned snippet:

webix.ui({
  rows:[
    { view:"datepicker", id:"dt",
      editable:true,
      placeholder:"any text value as a placeholder"
    }
  ]
});

$$("dt").setValue("this value isn't a date and will not be set")
#7

Thanks for quick response Listopad.

I am facing an issues with datepicker when given editable pors is true .
I Need to validate the input it should only accept the date not text or anything chat cater in that input filed . which i wrote js function but i don’t i am in that filed i am always getting different which i entered . can i know how to validate the date picker input filed when enter date in the input filed.


        var datepicker = webix.ui({
    view:"datepicker", 
    value: new Date(2012, 6, 8), 
    label: "Date", 
    timepicker: true,
    width: 300,
     editable:true,
      format: "%m/%d/%Y",
});
#8

Hello @shilpa,

You can solve it with the help of onKeyPress event
Here is a quick sample with an approximate solution: https://snippet.webix.com/ye7hnvh6

#9

Hello @wimk,

Since 2020 selecting a date is not working well. Two rows appearing in each other

Could you please specify the version of the library you are currently using? Any version below 7.0 will have this bug when using one of the latest versions of Google Chrome. The bug has been fixed as of Webix 7.0, which is why i recommend that you do update at your earliest convenience.

If, for some reason, you are unable to update at the present time you can employ the following workaround for any version below 7.0: https://snippet.webix.com/e513iaa2.

#10

snippet doesn’t work… on Android device.

#11

Since 2020 selecting a date is not working well.
Two rows appearing in each other

#12

it’s an earlier version than 7.0.
We use it on a Android device.

Thanks,
at first I’ll use the snippet otherwise if to test every thing what has changed.

#13

for me worked this:
in the CSS class ‘webix_cal_body’ I changed the TOP margin from 0 to 27px;