부트스트랩 3 날짜 선택기 - minDate 및 maxDate

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

안녕

minmax date 옵션을 사용하려고 하지만 설명서에서 예제 코드를 제공하지 않기 때문에 사용 방법을 잘 모르겠습니다.

스택 오버플로우에서 다음 작업을 수행할 수 있습니다.

minDate: moment()

그러나 그것은 그 순간이 정의되지 않은 오류를 던진다.

페이지에 포함된 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] || {}));
Kam Miah
편집된 질문3일 12월 2015 в 5:27
프로그래밍
javascript
3일 12월 2015 в 4:19
아직 보기가 없습니다.
해결책

내 질문에 답하기 위해서. 사용된 프레임워크는 구성 파일에 모멘트를 추가해야 합니다. 그렇지 않으면 http://momentjs.com/이나 다른 JS를 사용할 수 없습니다. 이 프레임워크는 보안상의 이유로 설정된 사용자와 대화합니다.

Kasun'의 답은 맞지만 더 나은 방법은 날짜 선택기가 이 JS를 사용하기 때문에 Moment.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',
});

moment()에 입력한 날짜 전후의 모든 날짜가 비활성화됩니다.

이것은 질문의 일부가 아니지만 달력이 로드될 때 입력 값에 현재 날짜를 표시하고 싶었지만 대신 자리 표시자 텍스트를 표시합니다. if minDate의 사용 때문인 것 같아 jQuery를 사용하여 입력값을 대체했습니다.

$datepickerInput.val(moment());
해설 (2)
 
var todayDate = new Date().getDate();

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

이 예제를 사용하면 momentjs를 사용하지 않고 오늘에서 다음 30일 사이의 날짜를 선택할 수 있는 옵션을 사용자에게 제공할 수 있습니다. 사용자에 따라 minDate 및 maxDate 값을 제공할 수 있습니다. 예를 들어 지난 30일에서 다음 30일 사이에 옵션을 제공하려면 다음과 같이 설정하십시오.

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

JavaScript Date Object를 사용하여 이 방법을 제공하십시오.

minDate: (new Date()).getDate()
해설 (0)