jQuery DateRangePicker with Times

2 posts, 0 answers
  1. ww1711
    ww1711 avatar
    29 posts
    Member since:
    May 2012

    Posted 17 Jan 2020 Link to this post

    Hello,

    I'd like to implement a jQuery "DateRangePicker with Times" found here in a RadGrid EditFormTemplate.

    When the following code is outside of the RadGrid, all works as expected: 

    <div class="col-md-4 col-md-offset-2 demo">
        <center>
            <input type="text" id="config-demo" class="form-control">
        </center>
    </div>
     
    <script type="text/javascript">
        $('#config-demo').daterangepicker({
            "timePicker": true,
            "linkedCalendars": false,
            "startDate": "01/11/2020",
            "endDate": "01/17/2020"
        }, function (start, end, label) {
            console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
        });
    </script>

     

    However, when the code is inserted into the <FormTemplate> blocks, it does not work. Can anyone help with what I might be missing? All the required references (.js, .css) are available to be downloaded as a ZIP on the page linked above.

    Alternatively, I'm open to listen to any recommendations on how to achieve a similar result as linked above via Telerik controls.

     

    Thanks!

  2. Rumen
    Admin
    Rumen avatar
    14419 posts

    Posted 21 Jan 2020 Link to this post

    Hi Wayne,

    Can you put the script inside telerik:RadScriptBlock - this works fine on my end as you can see in the attached video:

     

    <EditFormSettings EditFormType="Template">
        <FormTemplate>
            <input type="text" name="datetimes" />
            <telerik:RadScriptBlock runat="server">
                <script>
                    $(function () {
                        $('input[name="datetimes"]').daterangepicker({
                            timePicker: true,
                            startDate: moment().startOf('hour'),
                            endDate: moment().startOf('hour').add(32, 'hour'),
                            locale: {
                                format: 'M/DD hh:mm A'
                            }
                        });
                    });
                </script>
            </telerik:RadScriptBlock>

    Best Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Back to Top