Editable Datepicker

edited March 2015 in Technical questions

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.



  • edited March 2015

    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.

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

  • 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.

  • 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


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

  • 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:

        { view:"datepicker", id:"dt",
          placeholder:"any text value as a placeholder"
    $$("dt").setValue("this value isn't a date and will not be set") 
  • edited May 2019

    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", });
  • edited May 2019

    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

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

  • edited January 3

    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.

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

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

  • snippet doesn't work… on Android device.

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

Sign In or Register to comment.