bootstrap datepicker validation not working

21,751

Solution 1

try this code working fiddle 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'
    });

});

Check working fiddle here http://jsfiddle.net/KWvNe/ do not forgot to include essential javascript and css check here http://tarruda.github.io/bootstrap-datetimepicker/

You can set following options for a 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

Solution 2

use this jquery function

<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%"/>

Solution 3

I got ur problem...This is a simple date validation

<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>
Share:
21,751
Mohammed Sufian
Author by

Mohammed Sufian

A Hack Programmer, capable writing codes using almost all programming languages. He is also involved in maintaining &amp; securing Linux/Windows Servers (Vulnerability / Penetration Tester) Of course, I can't survive without the Internet &amp; I guess you too ;-) Quick Learning &amp; Implementing Ability... Googling and implementing, optimizing, testing, and using best practices... You can connect with Sufian using mohammedsufianshaikh at gmail

Updated on July 09, 2022

Comments

  • Mohammed Sufian
    Mohammed Sufian over 1 year

    I am trying to use bootstrap-datetimepicker.min.js and I have successfully integrated it in my project. Yet, when I tryg to show today's date as a default value in the from input field, it is not working.

    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%"/>
    

    AND with this I would also like to validate the date in from filed so that it should not be less than today's date and to date not less than tomorrow's date and not greater than 3 month date.

    I have searched for an answer on google and Stackoverflow already. Please help me.

  • Mohammed Sufian
    Mohammed Sufian almost 10 years
    thanks for your answer but after trying your given code it is not even showing me calender to select date
  • Mohammed Sufian
    Mohammed Sufian almost 10 years
    is there way to validate the date using jquery only..like after selecting date... it should check the date and validate it..using jquery only..and not datetimepicker
  • Mohammed Sufian
    Mohammed Sufian almost 10 years
    thanks sir it is working but i want that end date should be 3 months in future according to todays date
  • Mohammed Sufian
    Mohammed Sufian almost 10 years
    thank you sir according to @Subodh Ghulaxe sir answer i have solved this..using setdate attribute in jquery ...now i am looking for end date validation it soulhd be 3 months futer date according to todays date
  • Mohammed Sufian
    Mohammed Sufian almost 10 years
    thank you sir it works fine now..but it is not alowing me to slect date from todays upto 3 months.. that is i can only selct todays date and date after 3 months..and i would like to have that user can selcet todays date and date betwwen todays date and 3 month date..