4

Я пытаюсь использовать bootstrap-datetimepicker.min.js, и я успешно интегрировал его в свой проект. Тем не менее, когда я пытаюсь показать сегодняшнюю дату как значение по умолчанию в поле ввода from, оно не работает.bootstrap datepicker проверка не работает

Javascript:

var d = new Date(); 

var currDate = d.getDate(); 
var currMonth = d.getMonth(); 
var currYear = d.getFullYear(); 

var dateStr = currDate + "-" + currMonth + "-" + currYear; 

$('#from').datetimepicker({ 
    pickTime: false, 
    defaultDate: dateStr 
}); 

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/> 

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/> 

И с этим я хотел бы также проверить дату в from подана так, что оно не должно быть меньше, чем сегодняшняя дата и to даты не меньше даты завтрашнего дня и не более 3-х месяцев.

Я уже искал ответ на Google и Stackoverflow. Пожалуйста, помогите мне.

ответ

3

попробуйте этот код работает скрипке http://jsfiddle.net/KWvNe/

HTML

<div class="well"> 
    <div id="from-datepicker" class="input-append date"> 
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
     </i> 
    </span> 
    </div> 
</div> 

<div class="well"> 
    <div id="to-datepicker" class="input-append date"> 
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
     </i> 
    </span> 
    </div> 
</div> 

JS

$(function() { 

    var d = new Date(); 
    var today = d; 
    var dateThreeMonthLater = d.setMonth(d.getMonth() + 3); 

    $('#from-datepicker').datetimepicker({ 
     language: 'pt-BR', 
     startDate: today, 
     endDate: dateThreeMonthLater 
    }); 

    $('#to-datepicker').datetimepicker({ 
     language: 'pt-BR' 
    }); 

}); 

Проверьте рабочую скрипку здесь http://jsfiddle.net/KWvNe/ не забыл включить существенный яваскрипт и CSS чека здесь http://tarruda.github.io/bootstrap-datetimepicker/

Вы можете установить следующие параметры для DatePicker

maskInput: true,   // disables the text input mask 
    pickDate: true,   // disables the date picker 
    pickTime: true,   // disables de time picker 
    pick12HourFormat: false, // enables the 12-hour format time picker 
    pickSeconds: true,   // disables seconds in the time picker 
    startDate: -Infinity,  // set a minimum date 
    endDate: Infinity   // set a maximum date 
+0

спасибо, сэр, он работает, но я хочу, чтобы дата окончания была 3 месяца в будущем в соответствии с сегодняшней датой. –

+1

. Проверить обновленный ответ. –

+0

. Если этот ответ поможет вам пометить его как правильный ответ :) –

0

использование этой функции JQuery

<script> 
    $(function() { 
    $("#from").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      $("#from").datepicker("option", "dateFormat", "yy-mm-dd"); 
      $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     changeYear: true, 
     numberOfMonths: 1, 
     onClose: function(selectedDate) { 
      $("#to").datepicker("option", "dateFormat", "yy-mm-dd"); 
      $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
    }); 
</script> 

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/> 

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/> 
+0

спасибо за ваш ответ, но после попытки вашего данного кода это даже не показывая мне каландр, чтобы выбрать дату –

0

включают этот скрипт

// jQuery Date Picker 
jQuery(".datepicker").datepicker({ 
    showOtherMonths: true, 
    selectOtherMonths: false, 
    isRTL:false, 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 

}); 
jQuery('.datepicker').css('cursor', 'pointer'); 
jQuery('.datepicker').attr("readonly", "readonly"); 
jQuery('.datepicker').addClass('tooltip-info'); 
jQuery('.datepicker').attr('data-rel', 'tooltip'); 
jQuery('.datepicker').attr('data-placement', 'right'); 
jQuery('.datepicker').attr('data-original-title', 'Select a Date'); 
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd"); 
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown"); 
jQuery(".datepicker").each(function(){ 
    jQuery(this).datepicker("setDate", jQuery(this).attr('date-value')); 
}); 
Use id="datepicker" 

+0

еще раз спасибо, сэр ... но не работает снова..иже проблема .. –

+0

есть способ проверить дату, используя только jquery .. как после выбора даты ... он должен проверить date и подтвердите его ... используя jquery only..and not datetimepicker –

1

я получил уры проблемы ... Это простая проверка даты

<input type="text" id="txtdate" /> 
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/> 
<script> 
      function checkDate() { 
      var EnteredDate = document.getElementById("txtdate").value; //for javascript 
      var EnteredDate = $("#txtdate").val(); // For JQuery 
      var date = EnteredDate.substring(0, 2); 
      var month = EnteredDate.substring(3, 5); 
      var year = EnteredDate.substring(6, 10); 
      var myDate = new Date(year, month - 1, date); 
      var today = new Date(); 
      if (myDate > today) { 
       alert("Entered date is greater than today's date "); 
      } 
      else { 
       alert("Entered date is less than today's date "); 
      } 
     } 
    </script> 
+0

спасибо, сэр в соответствии с @Subodh Ghulaxe, сэр ответ, я решил это ... использовать атрибут setdate в jquery ... теперь я ищу дату окончания даты, чтобы она была на 3 месяца даты в соответствии с сегодняшней датой –