It's not related to shadow DOM. Following elements are maintaining the value:

<input id="date_release_week" type="text" name="date_release_week" class="filter-options-date date-pick dp-applied hasDatepicker" maxlength="255" autocomplete="off" value="02/02/2022">
<input id="date_begin" type="hidden" name="date_begin" class="filter-options-date-begin" maxlength="255" autocomplete="off" value="02/02/2022">
<input id="date_begin" type="hidden" name="date_begin" class="filter-options-date-begin" maxlength="255" autocomplete="off" value="02/03/2022">

In devtool console if you run one of the following you'll get the actual selected date value:

date_release_week.value
date_begin[0].value
date_begin[1].value

Also, in Jquery, use val() function to get input value:

$('input#date_release_week').change(() => {
  console.log('attr(\'val\'): ' + $('input#date_release_week').attr('value'));
  
  console.log('val(): ' + $('input#date_release_week').val());

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Type something and press enter.
<input type="text" id="date_release_week" name="name" required minlength="4" maxlength="8" size="10" value='add'>

You can directly use the selector for div tag to get the data. Here is an example.

$(document).ready(function(){
  $('#btn').on('click', function(){
   alert($('div[contenteditable="plaintext-only"]').text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input id="release_week" type="text" value="02/02/2022">
    <!-- Shadow Content (User Agent) -->
    <div contenteditable="plaintext-only">12/08/2021</div>
</input>

<button id='btn'>GetData</button>
<label id='data'></label>

So, if you can get the value of an element in the main document, you can just use $.attr() to get what you want. The same can be done if you know the shadow DOM, using $('input#release_week').closest('shadowRoot').find('div').

As for which new JavaScript to use, or where to look for help on how to use it, I'm not sure. I know there's a new module that's part of the Web Components polyfill called Element.prototype.getRootNode(), but that only works for elements in the main document -- there's no equivalent for shadow roots. So, unless something like this gets added to Web Components (I don't think it will), then you're kinda stuck with plain jQuery as far as I can tell.

My best guess would be something like this:

var root = someElementShadowRoot;
while (root) {
    if (root === document) { // your main document object
        return; // stop traversing and return element; it's not shadow DOM!
    } else { // this is a shadow DOM node tree, recurse deeper into its hierarchy
        root = root.getRootNode(); // returns a reference node / parent node / null (if at top of shadow DOM tree) -> recursive call! if statement will keep running until it finds the document and returns nothing
    }
}
return someElement; // you've reached the top of the shadow DOM tree; this is where you want to start. It may be possible that `someElement` is not actually a shadow root node, but it will be at this point (`someElement.getRootNode() === someElement`).