Bootstrap-DateTimePicker: Как удалить Год Число Месяц От Picker

Я хочу, чтобы удалить год число из верхней названия месяца подборщика, как на картинке ниже: Bootstrap-DateTimePicker: Как удалить Год Число Месяц От Picker

Я попытался с viewMode: 'months', но не работал. Как я могу сделать this.please помочь Вот код Источник:

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Review Sample Month Only</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css"> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
     <script type="text/javascript"> 
 
     $(function() { 
 
      $('#datetimepicker').datetimepicker({ \t \t \t  
 
     format: 'MM', 
 
       viewMode: 'months' \t \t \t \t 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    <body > 
 
     <div class="container" > 
 
     <div class="panel-group"> 
 
      <div class="panel panel-primary" > 
 
       <div class="panel-heading" > 
 
        <h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3> 
 
       </div> 
 
       <div class="panel-body"> 
 
        <form class="form-horizontal" > 
 
        <div class="form-group"> 
 
         <label class="control-label col-sm-2" for="datetimepicker" >Month:</label> 
 
         <div class="col-sm-2"> 
 
          <div class='input-group date'> 
 
           <input type='text' class="form-control" id='datetimepicker' name= "datetimepicker" placeholder="MM"/> 
 
           <span class="input-group-addon"> 
 
           <span class="glyphicon glyphicon-calendar"></span> 
 
           </span> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" id="button1" class="btn btn-primary">Save</button>       
 
         </div> 
 
        </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-05-26 user5005768

Ну, попробуйте это: -

.picker-switch{ 
 
display: none !important; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Review Sample Month Only</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css"> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 
     <script type="text/javascript"> 
 
     $(function() { 
 
      $('#datetimepicker').datetimepicker({ \t \t \t  
 
     format: 'MM', 
 
       viewMode: 'months' \t \t \t \t 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    <body > 
 
     <div class="container" > 
 
     <div class="panel-group"> 
 
      <div class="panel panel-primary" > 
 
       <div class="panel-heading" > 
 
        <h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3> 
 
       </div> 
 
       <div class="panel-body"> 
 
        <form class="form-horizontal" > 
 
        <div class="form-group"> 
 
         <label class="control-label col-sm-2" for="datetimepicker" >Month:</label> 
 
         <div class="col-sm-2"> 
 
          <div class='input-group date'> 
 
           <input type='text' class="form-control" id='datetimepicker' name= "datetimepicker" placeholder="MM"/> 
 
           <span class="input-group-addon"> 
 
           <span class="glyphicon glyphicon-calendar"></span> 
 
           </span> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" id="button1" class="btn btn-primary">Save</button>       
 
         </div> 
 
        </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-05-26 08:03:01

Благодаря @Vikash Пандей Это worked.Simple и хорошее решение. – user5005768

Рад помочь :) –

У меня была такая же проблема, и вместо этого пошел с Bootstrap Datepicker вместо времени выбора даты. Мне удалось удалить выбор года, установив minViewMode и maxViewMode в «месяцы».

https://bootstrap-datepicker.readthedocs.io/en/latest/

Модифицированный пример с использованием DatePicker:

$(function() { 
    $('#datepicker').datepicker({ 
     format: 'MM', 
     minViewMode: 'months', 
     maxViewMode: 'months', 
     startView: 'months' 
    }); 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Review Sample Month Only</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> 
 
     
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 
     <script type="text/javascript"> 
 
     $(function() { 
 
      $('#datepicker').datepicker({ \t \t \t  
 
       format: 'MM', 
 
       minViewMode: 'months', 
 
       maxViewMode: 'months', 
 
       startView: 'months' 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    <body > 
 
     <div class="container" > 
 
     <div class="panel-group"> 
 
      <div class="panel panel-primary" > 
 
       <div class="panel-heading" > 
 
        <h3 class="panel-title" style="text-align: center;">Review Sample Month Only</h3> 
 
       </div> 
 
       <div class="panel-body"> 
 
        <form class="form-horizontal" > 
 
        <div class="form-group"> 
 
         <label class="control-label col-sm-2" for="datetimepicker" >Month:</label> 
 
         <div class="col-sm-2"> 
 
          <div class='input-group date'> 
 
           <input type='text' class="form-control" id='datepicker' name= "datepicker" placeholder="MM"/> 
 
           <span class="input-group-addon"> 
 
           <span class="glyphicon glyphicon-calendar"></span> 
 
           </span> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <div class="col-sm-offset-2 col-sm-10"> 
 
          <button type="submit" id="button1" class="btn btn-primary">Save</button>       
 
         </div> 
 
        </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2017-06-09 17:38:48 Peter

Bootstrap-DateTimePicker: Как удалить Год Число Месяц От Picker

ответ

Смежные вопросы