Format.cshtml

@using Syncfusion.EJ2


@section ControlsSection{
    <div class=" col-lg-8 control-section">
        <div id="wrapper" class="daterangepicker-section">
            <div id="daterangepicker-control">
                <ejs-daterangepicker id="daterangepicker" format="dd/MMM/yy hh:mm a" startDate="ViewBag.start" endDate="ViewBag.end"></ejs-daterangepicker>
            </div>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <div class="radio-control" id="property" title="Select a format">
            <div class="row">
                <ejs-radiobutton id="format1" name="format" checked="true" label="dd/MMM/yy hh:mm a" value="dd/MMM/yy hh:mm a" change="onchange"></ejs-radiobutton>
            </div>
            <div class="row">
                <ejs-radiobutton id="format2" name="format" label="yyyy/MM/dd HH:mm" value="yyyy/MM/dd HH:mm" change="onchange"></ejs-radiobutton>
            </div>
            <div class="row">
                <ejs-radiobutton id="format3" name="format" label="dd/MMMM/yyyy" value="dd/MMMM/yyyy" change="onchange"></ejs-radiobutton>
            </div>
        </div>
    </div>
}

<script>
    function onchange(args) {
        var dateRangepickerOBJ = document.getElementById('daterangepicker').ej2_instances[0];
        /*Apply selected format to the component*/
        dateRangepickerOBJ.format = args.value;
        dateRangepickerOBJ.separator = (dateRangepickerOBJ.format === 'yyyy/MM/dd HH:mm') ? 'to' : '-';
    }
</script>

@*custom code start*@
<style>
    #wrapper {
        max-width: 350px;
        margin: 30px auto;
        padding-top: 50px;
    }

    .property-section {
        width: 250px;
    }
</style>
@*custom code end*@

@section ActionDescription{
    <div id="action-description">
        <p>
            In this sample, the DateRangePicker has been configured with the <code> dd/MMM/yy hh:mm a</code> date time format. To change this current date time format, go to the properties panel at the right side and select a date format from the availbale options. For mobile mode touch the icon at the right side and select a date time format from the availbale options.
        </p>
    </div>

}

@section Description{
    <div id="description">
        <p>
            Format sample illustrates the support of custom date time format in the DateRangePicker component by
            using the <code>format</code> property. You can also change the date time format by selecting it from the format options in the properties
            panel.
        </p>
        <p>
            More information on the date format configuration can be found in the <a href="https://ej2.syncfusion.com/aspnetcore/documentation/daterangepicker/globalization/"
                                                                                     target="_blank">documentation section</a>.
        </p>
        </p>
    </div>

}

@section Meta{

       <meta content=  "This example demonstrates how to change the date time format in the input field based on the format in the ASP.NET Core DateRangePicker." />
}