Add hours and minutes from button in data time picker time picker?

Add hours and minutes from button in data time picker time picker?

Asked on October 26, 2018 in Bootstrap.
Add Comment


  • 1 Answer(s)

    For setting as text value use $(“#datetimepicker3”).find(“input”).val(text); and for setting as time value use $(‘#datetimepicker3’).data(“DateTimePicker”).date(text);

    Bind the click event on each button by class.I used .btn as example.

    Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.

    set the value using $(“#datetimepicker3”).find(“input”).val(text);

    $(".btn").on('click', function(e) {
        var text = $(this).text().replace("h","").replace("m","");
    $("#datetimepicker3").find("input").val(text);
    //$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
    });
    

    Working snippet for your code:

    $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'hh:mm'
                });
            });
            $(".btn").on('click', function(e) {
            var text = $(this).text().replace("h","").replace("m","");
             //$('#datetimepicker3').data("DateTimePicker").date(text);
        $("#datetimepicker3").find("input").val(text);
    });
    <link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href="./css/prettify-1.0.css" rel="stylesheet">
        <link href="./css/base.css" rel="stylesheet">
        <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <div class="row">
        <div class='col-sm-1'>
            <button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
        </div>
        <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
        </div>
        <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
        </div>
        <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
        </div>
        <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
        </div>
    <div class='col-sm-1'>
        <button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
    </div>
        </div>
    <div class="row">
    
    Answered on October 26, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.