There is indeed a trick for this! You can use the zero frame method that @Gleb demo’d at Config 2021 in conjuction with @chudoloo’s Resizable Auto Layout Spacer solution. By the way, this will need to be executed on your “date-picker” component, and not your local one. So as long as you have edit access to that you’re good to proceed. The steps for your scenario would be as follows:
- Create a regular frame, and apply auto-layout to it. Re-name it “Resizer”
- Add 2 more auto-layout frames inside your new Resizer frame.
- Remove any padding on the Resizer frame, and using the advabced options in the auto layout panel, change the spacing mode to “Space between.” You should have something like this:
- Set the Resizer frame’s height-resizing rule to “Fixed” (it was probably on “hug”) and use the height input field in the design panel to enter a height of “0.0001”. This is effectively like entering “0”, but Figma won’t allow for that value so you need to use a teeny tiny decimal.
- Set the height-resizing rule of the two frames inside the Resizer (these would be the frames with grey fills in my screenshot above) to “Fill.”
- Set those same two frames width to “0.0001” just like you did for the Resizer’s height earlier.
- Move the resizer inside the main component of the date picker from your screenshot.
Now without knowing how your date picker is set up I can only guess so much about it’s exact construction, but I’m assuming it’s using auto layout with a horizontal orientation. Maybe your “Select date” text is full width, which pushes the calendar icon to the right no matter the date picker’s width… or perhaps not, and the date picker is using the “Space between” spacing mode to keep the label separate from the icon. Either way, after you drag the Resizer frame into it, something like this will happen:
Don’t freak out, this is part of the process.
- To fix that, you’ll need to change the auto-layout direction on your date picker component from horizontal to vertical.
- Then, wrap the “Select date” text object and the calendar icon in an auto layout frame that runs horizontally.
- Set the width of that frame you just made to “Fill”, and update the auto-layout alignment settings from the default “top left” to “center left” to re-align the label with the icon.
- You might also need to double check the “Select date” layer’s resizing rules, as they might’ve been changed to “fixed” in this process. Either “fill” or “hug” are fine (I’d choose “fill”).
At this point you your date picker should have a layer structure like this (screenshot taken in outline mode, which you can toggle on/off with Command + Y).
Final steps!
- Set the “space between” value on the Date Picker component to zero, and set its height and width resizing rules to “hug”.
-
Double check that the zero-height Resizer frame inside your Date Picker component is set to “hug” horizontally, this is the secret sauce needed for this to work!
Now you should be cooking with gas 
Peel off an instance, and instead of grabbing one of the outer edges of the date picker instance to resize it, select the “Resizer” frame within (and since it’s barely visible on the canvas I’d recommend using your keyboard to navigate the layers panel, or just select it from the layers panel) and adjust the “Space between” value in the auto layout section of the design panel. You can now set custom widths to any instance of your date picker instances
And if there’s a case where you need it to be set to “Fill” you still have that option! Here’s view-access to the Figma file I used to take these screenshots and GIFs, in case you’d like to have a closer look at the layers and auto layout settings.