2017-01-07 5 views
2

Я пытаюсь получить следующий Bootstrap 3 плагин для работы:Bootstrap 3 Datepicker + Moment.js, кажется, не может получить формат для работы

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

Одним из требований является Moment .js:

http://momentjs.com/docs/#/customization/

Мой HTML является:

<div class="container"> 
    <div class='col-md-6'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-6'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 

В JS:

<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script> 
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script> 
    <link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" /> 

$(function() { 
     $('#datetimepicker6').datetimepicker({ 
      maxDate: moment(), 
      allowInputToggle: true, 
      enabledHours : false, 
      //format: moment().format('YYYY-MM-DD'), 
      format: moment().format('LLLL'), 
      locale: "en" 
     }); 
     $('#datetimepicker7').datetimepicker({ 
      useCurrent: false, //Important! See issue #1075 
      allowInputToggle: true, 
      enabledHours : false 
     }); 
     $("#datetimepicker6").on("dp.change", function (e) { 
      $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
     }); 
     $("#datetimepicker7").on("dp.change", function (e) { 
      $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
     }); 
    }); 
</script> 

Я немного запутался, так как я не могу получить формат для работы. Если я использую это для установки формата:

format: moment().format('LLLL'), 

Я получаю ДЕЙСТВИТЕЛЬНО странную дату! (Даже не уверен, что язык, который ??)

enter image description here

Если изменить его на:

format: moment().format('YYYY-MM-DD'), 

дата действительно показывает правильно, но тогда выпадающий перестает работать для меня!

enter image description here

Может кто-нибудь предложить, где я неправильно? Я сделал кучу играть вокруг, прибегая к помощи и т.д., но я до сих пор не могу понять :(

КСТАТИ: Сам выпадающий работает, когда я не пытайся изменить формат даты:

enter image description here

+0

Вы импортируете JQuery, правильно? –

+0

@ LeonelAtencio - да, извините, я забыл включить это (это немного больше в моем коде). Сам скрипт запускается - это просто формат даты, который я не могу понять :) –

ответ

2

хорошо, хорошо, я не знаю, почему он не хотел принимать значение moment().format(), но после проверки вопросов GitHub, я наткнулся на вопрос с форматом это привело меня к этому примеру:.

https://jsfiddle.net/dugujianxiao/ad64awL7/11/

Таким образом, после настройки моего кода, чтобы использовать format: 'YYYY-MM-DD' вместо этого, и это, кажется, сортировал его:

$('#datetimepicker6').datetimepicker({ 
    maxDate: moment(), 
    allowInputToggle: true, 
    enabledHours : false, 
    locale: moment().local('en'), 
    format: 'YYYY-MM-DD' 
}); 

дата верна, а также формат.

Надеюсь, это поможет кому-то еще!

+1

Возможно, вы уже исправили свою проблему, так или иначе заметите, что вы ** можете ** использовать сборщик с форматом 'LLLL'. Поскольку параметр ['format'] (https://eonasdan.github.io/bootstrap-datetimepicker/Options/#format) принимает строку, вам просто нужно установить' format: 'LLLL' вместо 'format: moment(). Format ('LLLL') ' – VincenzoC