CODEWITHSUNDEEP
javascripttwitter-bootstrap-3bootstrap-datetimepicker
Alexking2005
Alexking2005

Reputation: 315

bootstrap datepicker can't set minDate

I made a lot of modification, i tried a lot of differents things, but nothing works. I have a isabled field in which a date is contained (25-05-2016). I would like to set a minDate to my datepicker with this value (25-05-2016). Nothing works, even if i set the value directly. Here is my code:

var myDate = $('#CRUEventModal #rdvStartDate').val(); //Get the value from field
myDate = moment(myDate , "DD-MM-YYYY");
//myDate  = moment(myDate , "DD-MM-YYYY").add(1, 'months'); one of things i tried

var myDate2 = $('#CRUEventModal #rdvStartDate').val(); // Another things i tried
myDate2 = moment(myDate2 , "DD-MM-YYYY").format('YYYY-MM-DD');

$('#rdvFinDatefinPicker')
    .datepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'dd-mm-yyyy',
        language:"fr",
        autoclose:"true",
        minDate: myDate  //myDate2 didn't work too!
    })
    .on('changeDate', function(e) {
        // Revalidate the date field
        //$('#eventForm').formValidation('revalidateField', 'eventDate');
    });

Thanks a lot

Upvotes: 0

Views: 1929

Answers (3)

Urvish Patel
Urvish Patel

Reputation: 144

**$('#datetimepicker1').datetimepicker({
           // format: 'dddd, MMMM Do YYYY, h:mm:ss a',
            format: "dd-M-yyyy, HH:ii P",
            startDate: '+1d',
            endDate: '+60m',
            showMeridian: true,
            autoclose: true
        });

otherwise 

$('#datetimepicker1').datetimepicker({
       format: 'dddd, MMMM Do YYYY, h:mm:ss a',
       useCurrent: false,
       minDate: moment().add(1, 'd').toDate(),

       locale: 'de',

     });
   });

in mindate add as your day you want to start.. I hope that it will be use it first code I am using in my project...it was working well,.

Upvotes: 0

VincenzoC
VincenzoC

Reputation: 31482

Using eonasdan datetimepicker you can have the following code:

var myDate = $('#rdvStartDate').val(); //Get the value from field
myDate = moment(myDate , "DD-MM-YYYY");

$('#rdvFinDatefinPicker')
    .datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'DD-MM-YYYY',
        locale:"fr",
        minDate: myDate
    })
    .on('dp.change', function(e) {
        // Revalidate the date field
        //$('#eventForm').formValidation('revalidateField', 'eventDate');
    });
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/fr.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<input id="rdvStartDate" type='text' class="form-control" value="25-05-2016" disabled />
<div class='input-group date' id='rdvFinDatefinPicker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

Note that you have to import the french locale for momentjs and set the locale option. The format option has to follow momentjs rules, so you have to specify it uppercase. You don't need the autoclose option since the datetimepicker has a keepOpen option that is false by default.

Note that the datetimepicker fires dp.change event.

I prefer eonasdan datetimepicker because it uses momentjs and it has a rich API.

Upvotes: 0

Urvish Patel
Urvish Patel

Reputation: 144

$('#rdvFinDatefinPicker')
        .datepicker({
            useCurrent: false, //Important! See issue #1075
            format: 'dd-mm-yyyy',
            **startDate: '28-05-2016',**
            language:"fr",
            autoclose:"true",

        })

You should use startdate function which is date start you want or enddate function also helpful for maxdate...thnaks

Upvotes: 1

Related Questions