Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to pass props to input in DateInput #387

Closed
jagregory opened this issue Dec 23, 2016 · 10 comments
Closed

Unable to pass props to input in DateInput #387

jagregory opened this issue Dec 23, 2016 · 10 comments

Comments

@jagregory
Copy link

Bug report

Unable to pass props to the input element inside of a DateInput. e.g. can't use the HTML5 validation attributes. Related to: #361

  • Package version(s): @blueprintjs/datetime 1.4.0
  • Browser and OS versions: All.

Steps to reproduce

<DateInput required={true} />

Actual behavior

<input type="text" class="pt-input">

Expected behavior

<input type="text" class="pt-input" required>
@leebyp
Copy link
Contributor

leebyp commented Jan 10, 2017

To proxy the props down to the input in a sane way, I think we need a new API

<DateInput
    datePickerProps={...}
    inputGroupProps={...}
    className, closeOnSelection, defaultValue, format, value...
/>

Things to note:

  • datePickerProps and inputGroupProps just proxies the props down to the sub-component
  • The exceptions are overlapping props (defaultValue, onChange, value) which are on the <DateInput /> itself
  • Should some props be ignored? In particular for inputGroupProps: rightElement and type. Although, I can foresee a customization with the calendar icon in addition to a rightElement (or even substituting it)
  • I want to set this up in a way where a <DateRangeInput /> would also have a decent / similar API if we ever do it.

@llorca
Copy link
Contributor

llorca commented Jan 10, 2017

@cmslewis is looking at DateRangeInput, so would be neat to have the same API for both indeed

@cmslewis
Copy link
Contributor

Ack.

@leebyp leebyp assigned leebyp and cmslewis and unassigned leebyp Jan 10, 2017
@llorca llorca modified the milestones: 1.7.0, 1.6.0 Jan 13, 2017
@llorca llorca modified the milestones: 1.7.0, 1.8.0 Jan 26, 2017
@valentinvoilean
Copy link

Hi guys ! Any news about this ? I want to add the "name" attribute to serialize the form afterwards.

@giladgray
Copy link
Contributor

@valentinvoilean progress here is slow at best because solving this issue correctly will likely be a breaking change (as proposed in #387 (comment) above) which will require a new major version. We are in the process of planning Blueprint 2.0 but I can't even begin to offer a time estimate.

@giladgray giladgray modified the milestones: 1.8.0, 1.9.0 Feb 3, 2017
@orecus
Copy link

orecus commented Feb 6, 2017

This would be great, as I would like to pass pt-fill to the input within <DateInput/> so that the size of the input aligns with the rest of the inputs within my form.

From my testing this is currently not possible to achive.

@giladgray giladgray modified the milestones: 2.x, 1.9.0 Feb 6, 2017
@hmaurer
Copy link

hmaurer commented Jun 7, 2018

I would also be interested in being able to pass pt-fill to a DateInput. Any idea how i can achieve this? Thank you!

@giladgray
Copy link
Contributor

giladgray commented Jun 7, 2018

@hmaurer this has been possible since #1011 added the inputProps prop! a quick glance through the docs should have revealed this.

<DateInput inputProps={{ className: Classes.FILL }} />

@hmaurer
Copy link

hmaurer commented Jun 7, 2018

@giladgray Thanks! I tried this but it doesn't seem to do the job. The DateInput is wrapped in an inline pt-popover-wrapper which doesn't fill the whole container. Am I missing something?

@sheenm
Copy link

sheenm commented May 31, 2019

@giladgray Thanks! I tried this but it doesn't seem to do the job. The DateInput is wrapped in an inline pt-popover-wrapper which doesn't fill the whole container. Am I missing something?

I know that's an old question, but for anyone who is interested:

<DateInput
            popoverProps={{
                targetTagName: 'div',
                wrapperTagName: 'div'
            }}
 // ... other props
/>

that will do the trick

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants