Bootstrap 3 DatePicker - MinDate и MaxDate

http://eonasdan.github.io/bootstrap-datetimepicker/Bootstrap 3 DatePicker - MinDate и MaxDate

Привет

Я пытаюсь использовать мин макс параметры даты, но не знаете, как использовать его в качестве документации не дает пример кода.

я нашел на StackOverflow, что вы можете сделать это:

MinDate: момент()

Но выдает ошибку, что момент не определена.

Я предполагаю, что он не может найти moment.js, который включен на страницу, иначе плагин не будет работать.

Я пытаюсь отключить 10 дней до текущего дня и показать 30 дней с текущего дня.

Благодаря

Here is the code (I have removed everything except whats important to simply show the code): 
 

 
window[ns] = window[ns] || {}; 
 
(function ($, moment, app) { 
 
    'use strict'; 
 

 
    // Private Methods 
 
    var nameSpace = 'global', 
 
     globalDataObject = null, 
 

 
     
 
     notifyRenderCallbacks = function (pageName) { 
 

 
      if ($('.js-calendar').length) { 
 
       $('.js-calendar').datetimepicker({ 
 
        format: 'DD MMMM YYYY', 
 
        dayViewHeaderFormat: 'MMMM YYYY', 
 
        icons: { 
 
         next: 'icon icon-chevronright', 
 
         previous: 'icon icon-chevronleft' 
 
        }, 
 
        enabledDates: moment().add(30, 'days') 
 
       }); 
 

 
      } 
 

 
     }, 
 

 

 

 
    // If this module requires global data 
 

 
    app.register(nameSpace, initialize); 
 

 

 
}(jQuery, moment, window[ns] || {}));

источник

2015-12-03 Kam Miah

Вы можете сделать что-то с moment.js, но так как мой код продолжает бросать ошибку при использовании момента() –

ли кто-нибудь знать сайты, на которых есть примеры того, как использовать Bootstrap 3 datepicker? –

Как вы можете видеть, я использую момент (в этом примере для enabledDates), но я продолжаю получать ошибку, что момент не определен. Я проверил мой журнал консоли dev, и я могу использовать функцию момента отлично там. –

Чтобы ответить на мой вопрос.В используемой структуре потребовалось добавить момент в файл конфигурации, иначе он не разрешил бы использовать http://momentjs.com/ или любой другой JS - поговорил с человеком, который создал структуру, и они сделали это по соображениям безопасности.

Ответ Kasun правильный, но лучший способ сделать это - использовать Moment.js, поскольку datetimepicker использует этот JS.

Чтобы ответить на вторую часть, которая должна быть отключена за 10 дней до текущего дня и показать 30 дней с текущего дня, вам необходимо установить параметры, как показано ниже. Мне не нужно было делать это за 10 дней до этого, но мне нужно было выбрать только определенное количество дней. Я добавил комментарии, чтобы прояснить ситуацию, но их не должно быть.

$mydatepicker.datetimepicker({ 
    minDate: moment(), // Current day 
    maxDate: moment().add(30, 'days'), // 30 days from the current day 
    viewMode: 'days', 
    format: 'DD MMMM YYYY', 
    dayViewHeaderFormat: 'MMMM YYYY', 
});

Что будет сделано выше, это включить все дни между minDate и maxDate.

Вы можете также ввести диапазон дат:

$mydatepicker.datetimepicker({ 
    minDate: moment("12/01/2015"), 
    maxDate: moment("12/30/2015"), 
    viewMode: 'days', 
    format: 'DD MMMM YYYY', 
    dayViewHeaderFormat: 'MMMM YYYY', 
});

И это отключит все дни до и после даты, которые вы ввели в момент().

Это не часть вопроса, но я хотел отобразить текущий день во входном значении, когда календарь загружен, но он не будет, вместо этого он будет показывать текст заполнителя. Я думаю, что из-за использования, если minDate, поэтому я просто использовал jQuery для замены значения ввода.

$datepickerInput.val(moment());

источник

2015-12-17 11:11:10

Я думаю, что мой ответ более динамичен, чем ваш. –

Привет, Касун, извините, вы, должно быть, не поняли, что я написал выше. Вы можете сделать все из коробки, поэтому ваш метод означает, что кто-то пишет ненужный код. Прочитайте мой код, который на самом деле не мой код, это действительно код плагина с моими значениями, а затем сравните его с вашим, а затем укажите детали, почему он более динамичен. Спасибо –

Вы должны быть в состоянии обеспечить только дату для MinDate/MaxDate. , например:

minDate: '2015-12-03 или

var d = new Date(); 

minDate: d.getDate()

источник

2015-12-03 16:21:11 AlexD

Просто дать этот путь, с помощью JavaScript объекта Date:

minDate: (new Date()).getDate()

источник

2015-12-03 16:21:46

Сначала вам нужно скачать jQuery.js и moment.js файлы и включить их в веб-страницу, чтобы иметь возможность работать с указанным выше плагином. (если вы нажали две гиперссылки, вы, возможно, открыли их в своем браузере сейчас, так что загрузите их прямо и продолжайте связывать их так же, как я сделал ниже. И Bootstrap после моего ответа настроен на работу с его Bootstrap CDN links)

и если вы хотите изучить JQuery и Moment.js еще более, следуйте по ссылкам ниже, чтобы их официальных сайтах:

Her e - это веб-страница, которую я создал для вашего вопроса:

<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="<YOUR_PATH_TO>/jquery-2.1.4.js"></script> 
    <script type="text/javascript" src="<YOUR_PATH_TO>/moment.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <!-- Your Date Picker Plugin --> 
    <script type="text/javascript" src="<YOUR_PATH_TO>/bootstrap-datetimepicker.js"></script> 
</head> 
<body> 
<div class="container"> 
    <div class="row" style="margin-top:50px;"> 
     <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker1'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    var maxDate = getAdjustedDate(+30); 
    var minDate = getAdjustedDate(-10); 
    var tempDt = new Date(); 
    console.log("today: "+tempDt.getDate()); 
    console.log("minDate: "+minDate); 
    console.log("maxDate: "+maxDate); 

    $('#datetimepicker1').datetimepicker({ 
     maxDate: maxDate, 
     minDate: minDate 
    }); 
}); 

var getAdjustedDate = function (adjustment) { 
    var today = new Date(); 
    today.setDate(today.getDate() + adjustment); 

    var dd = today.getDate()-1; 
    var mm = today.getMonth()+1; //January is 0! 

    var yyyy = today.getFullYear(); 
    if(dd<10){ 
     dd='0'+dd 
    }; 

    if(mm<10){ 
     mm='0'+mm 
    }; 

    return mm+'/'+dd+'/'+yyyy; 
}; 
</script> 

</body> 
</html>

Надеюсь, что этот пример может работать в другом месте, если вы настроили его достаточно справедливо.

Пожалуйста, спросите, хотите ли вы, чтобы я разъяснил что-либо, я помогу, если только смогу.

С наилучшими пожеланиями,
Kasun Randika

источник

2015-12-03 17:13:49

Спасибо Kasun. У меня работает datetimepicker, прежде чем отправлять вопрос о минимальной дате. Вы можете делать то, что вы предоставили с помощью moment.js в котором говорится, документация ... MinDate По умолчанию: ложный Принимает: дату, момент, строка Однако я получаю сообщение об ошибке при попытке использовать момент. –

Добавление кода в главный вопрос выше. –

Я думаю, вы неправильно поняли мой ответ. Я не использовал Moment.js в своем JavaScript-коде, и я обновил его несколько минут назад. А также Moment.JS требуется плагин Bootstrap DatePicker. Поэтому, пожалуйста, попробуйте выполнить мой фрагмент кода JavaScript и понять его. И если бы это было полезно для вас, пожалуйста, примите его и голосуйте! ;-) –

var todayDate = new Date().getDate(); 

$('#element').datetimepicker({ 
    timepicker:false, 
    formatDate:'Y/m/d', 
    minDate: new Date(), 
    maxDate: new Date(new Date().setDate(todayDate + 30)) 
});

Используя этот пример, вы можете дать опцию пользователю выбрать дату между сегодня и ближайшие 30 дней без использования momentjs. Вы можете предоставить значение minDate и maxDate в соответствии с вами. Для примера, если вы хотите, чтобы дать варианты между последние 30 дней в течение 30 дней, поэтому установите

minDate: new Date(new Date().setDate(todayDate - 30)) 
maxDate: new Date(new Date().setDate(todayDate + 30))

источник

2017-01-18 12:29:02

Пожалуйста, укажите в своем коде, как установить значение переменной "todayDate" – vicenteherrera

Bootstrap 3 DatePicker - MinDate и MaxDate

ответ

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