Jump to content
Sign in to follow this  
Czar

Tw3Edit - input type itdate

Recommended Posts

When you set TW3Edit to input  type itDate the up/down items are attached to the top of the component. They look pretty bad when the edit box is normal height but they look unacceptable when the editbox's height is increased. Could this be fixed please.

SmartMS_2018-01-31_09-42-29.png

Share this post


Link to post
Share on other sites

The different it<TYPE> properties for the editbox are mapped one-on-one on the <input> html-element with a specific type-attribute (here type="date").

Unfortunately, display and styling of this element is done by the browser, and implementations across browsers are wildly different. 

See www.lynkit.com.au/native/www and scroll down to JInput at the bottom. This displays native formatting of all input-types on the platform you're viewing it.

You can however do some  styling yourself and in addition there are about 8 different pseudo elements you can use (webkit only)

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Styling :

/* A few custom styles for date inputs */
input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    color: #95a5a6;
    font-family: "Helvetica", arial, sans-serif;
    font-size: 18px;
    border:1px solid #ecf0f1;
    background:#ecf0f1;
    padding:5px;
}

pseudo-elements

/* Removes the clear button from date inputs */
input[type="date"]::-webkit-clear-button {
    display: none;
}

/* Removes the spin button */
input[type="date"]::-webkit-inner-spin-button { 
    display: none;
}

/* Always display the drop down caret */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #2c3e50;
}

see also https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker and other conversations on that platform

If you want to set css pseudo values programmatically, something like this might do :

Procedure SetCSS(pseudo, prop, value: string);
begin
//sheet.insertRule('input[type="date"]::-webkit-inner-spin-button { display: none }', 0);  

var s = browserapi.document.styleSheets;
  if s.length = 0 then begin
    var style := browserapi.document.createElement("STYLE");
    browserapi.document.head.appendChild(style);
  end;

  var s0,s1 : string;
  s0 := 'input[type="date"]';
  s1 := prop + ': ' + value;


  browserapi.document.styleSheets[0].insertRule(s0 + '::' + pseudo + ' { ' + s1 +'}', 0);
end;

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×