symfony 3 : "this value is Not valide" - symfony

Question

i have a problem when i insert date from calender using jquery !there is a problem of conversion i think .
II try to use
{{ form_widget(form.dateArrivage|date("m/d/Y") , {'attr': {'class': 'from'}}) }}<br>
but :
An exception has been thrown during the rendering of a template
Catchable Fatal Error: Object of class Symfony\Component\Form\FormView could not be converted to string
in GestionHotelBundle:Default:index.html.twig at line 147.
this is ReservationType
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('dateArrivage',DateTimeType::class, array(
'widget' => 'single_text',
'format' => 'dd/MM/yyyy',
'attr' => array('class' => 'date')
))
->add('dateSortie',DateTimeType::class, array(
'widget' => 'single_text',
'format' => 'dd/MM/yyyy',
'attr' => array('class' => 'date')
))
->add('nbjour')
->add('dateReser',DateType::class)
->add('chambres', CollectionType::class, array(
'entry_type' => ChambreType::class,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
))
->add('save',SubmitType::class)
;
;
}
and this is the vue :
<script>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( ".from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( ".to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
{{ form_start(form) }}
{{ form_label(form.dateArrivage) }}
{{ form_errors(form.dateArrivage) }}
{{ form_widget(form.dateArrivage , {'attr': {'class': 'from'}}) }}<br>
<br><br>
{{ form_label(form.dateSortie) }}
{{ form_errors(form.dateSortie) }}
{{ form_widget(form.dateSortie, {'attr': {'class': 'to'}}) }}<br><br>
<br><br>
{{ form_row(form.nbjour) }}
{{ form_row(form.dateReser) }}

Answer 1

Doc says :
If you want your field to be rendered as an HTML5 "date" field, you
have to use a single_text widget with the yyyy-MM-dd format (the RFC
3339 format) which is the default value if you use the single_text
widget.
So you have to change date format into your form builder:
$builder
->add('dateArrivage',DateTimeType::class, array(
'date_widget' => 'single_text',
'date_format' => 'yyyy-MM-dd', //here
))
->add('dateSortie',DateTimeType::class, array(
'date_widget' => 'single_text',
'date_format' => 'yyyy-MM-dd', //and here
))

Answer 2

Set the dateformat option in the jQuery-UI datepicker :
$(".from").datepicker({ dateFormat:'mm/dd/yy'})
Nothing else. You don't need to parse the date yourself.
Other mistake you have :
DateTimeType must not use format and widget options but date_format, date_widget, time_format and time_widget options ...
Because the jQuery plugin doesn't care about time. It can only be applied on the date part.
http://symfony.com/doc/current/reference/forms/types/datetime.html#date-format