Disable time in bootstrap date time picker

前端 未结 20 1411
夕颜
夕颜 2021-01-30 07:56

I am using bootstrap date time picker in my web application, made in PHP/HTML5 and JavaScript. I am currently using one from here: http://tarruda.github.io/bootstrap-datetimepic

相关标签:
20条回答
  • 2021-01-30 08:19
    <div class="container">
      <input type="text" id="datetimepicker"/>
    </div>
    
    <script type="text/javascript">
      $(function() {
        // trigger datepicker
        $('#datetimepicker').datetimepicker({
           pickTime: false,
            minView: 2,
            format: 'dd/mm/yyyy',
            autoclose: true,
        });
      });
    </script>
    
    0 讨论(0)
  • 2021-01-30 08:19

    The selector criteria is now an attribute the DIV tag.

    examples are ...

    data-date-format="dd MM yyyy" 
    data-date-format="dd MM yyyy - HH:ii p
    data-date-format="hh:ii"
    

    so the bootstrap example for dd mm yyyy is:-

    <div class="input-group date form_date col-md-5" data-date="" 
        data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
    ..... etc ....
    </div>
    

    my Javascript settings are as follows:-

                var picker_settings = {
                    language:  'en',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minView: 2,
                    forceParse: 0
                };
    
            $(datePickerId).datetimepicker(picker_settings);
    

    You can see working examples of these if you download the bootstrap-datetimepicker-master file. There are sample folders each with an index.html.

    0 讨论(0)
  • 2021-01-30 08:22

    This is for: Eonasdan's Bootstrap Datetimepicker

    First of all I would provide an id attribute for the <input> and then initialize the datetimepicker directly for that <input> (and not for the parent container):

    <div class="container">
      <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
    </div>
    <script type="text/javascript">
      $(function() {
        // Bootstrap DateTimePicker v3
        $('#datetimepicker').datetimepicker({
          pickTime: false
        });
        // Bootstrap DateTimePicker v4
        $('#datetimepicker').datetimepicker({
          format: 'DD/MM/YYYY'
        });
      });
    </script>
    

    For v3: Contrary to Ck Maurya's answer:

    • pickDate: false will disable the date and only allow to pick a time
    • pickTime: false will disable the time and only allow to pick a date (which is what you want).

    For v4: Bootstrap Datetimepicker now uses the format to determine if a time-component is present. If no time component is present, it won't let you choose a time (and hide the clock icon).

    0 讨论(0)
  • 2021-01-30 08:26

    I tried all of the solutions posted here but none of them worked for me. I managed to disable the time by using this line of code in my jQuery:

    $('#datetimepicker4').datetimepicker({
        format: 'YYYY-MM-DD'
    });
    

    This set the format to date only and disabled the time completely. Hope this helps.

    0 讨论(0)
  • This shows only date:

    $('#myDateTimePicker').datetimepicker({
            format: 'dd.mm.yyyy',
            minView: 2,
            maxView: 4,
            autoclose: true
          });
    

    More on the subject here

    0 讨论(0)
  • 2021-01-30 08:27
     $("#datetimepicker4").datepicker({
        dateFormat: 'mm/dd/yy',
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        pickTime: false,
        format: 'YYYY-MM-DD'
    });
    
    0 讨论(0)
提交回复
热议问题