Adminlte: Datepicker sample page and plugin outdated

[rafaelrenanpacheco]

Hello Abdullah!

I didn't find any sample page using Datepicker plugin, just samples using Daterangepicker.

After that I found that there is a Datepicker plugin inside AdminLTE plugins folder, and so I tried to use that. It worked as expected, but with some weird style, and I did add the css and js references. So I went to their git repo, downloaded the current version, updated the plugin datepicker folder, and the weird style went away. Here is the sample of the up-to-date version of datepicker:

That being said, I have two suggestions:

1: In the advanced form sample page, add some Datepicker sample, not only daterangepicker.
2: Update the datepicker plugin folder to the lastest version (bootstrap-datepicker.js and bootstrap-datepicker3.css is enough).

Here is my code sample:

<div class="form-group">
    <label class="col-md-2 control-label" for="Date">Date</label>
    <div class="col-md-10">
        <div class="input-group">
            <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
            </div>
            <input type="text" class="form-control" id="Date"/>
        </div>
    </div>
</div>

$('#Date').datepicker({
    autoclose: true,
    todayHighlight: true
});

Thanks!
Rafael Pacheco.

[almasaeed2010]

Hello,

The datepicker plugin is used in Dashboard V1.0 and changing the style would affect that. Changing the style directly was a mistake that we discovered later with the 2.0 release. However, a fix should be provided with the next release. Thanks!

[masteradhoc]

Hi @rafael-renan-pacheco ! Thanks so much for this post. Was searching and trying for hours now.. How have you embedded the plugin into ADMIN LTE?

I have embedded it now adding this to the JS Codes
<!-- DATEPICKER --> <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>

and this to header:
<!-- datepicker --> <link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />

Have you took the latest Version from here? (https://github.com/eternicode/bootstrap-datepicker/tree/v1.4.0)

Just as record. Files are located here:

• bootstrap-datepicker-1.4.0\dist\cssbootstrap-datepicker3.css and
• bootstrap-datepicker-1.4.0bootstrap-datepicker-1.4.0\dist\jsbootstrap-datepicker.js
  ..all other files i dont need to use?

This would be useful for the docs:

• http://eternicode.github.io/bootstrap-datepicker/

Thanks for implementing soon @almasaeed2010

[masteradhoc]

Does someone know how to put two date input fields with the same name on one page? At the moment i just get one valid field e.g. one field which i get a datepicker..

[rafaelrenanpacheco]

@masteradhoc download 1.4 from "bootstrap-datepicker" repo, delete the js and css from the current datepicker folder at AdminLTE, and put the bootstrap-datepicker.js and bootstrap-datepicker3.css, as well the lang folder, in the datepicker AdminLTE plugin folder.

Then just reference bootstrap-datepicker.js and bootstrap-datepicker3.css in your app.

Does someone know how to put two date input fields with the same name on one page? At the moment i just get one valid field e.g. one field which i get a datepicker..

Change their input ID, and call datepicker for each ID.

[masteradhoc]

Thanks Rafael!

I do not like the idea to call each datepicker alone. Isnt there an easy way to address all datepickers/more datepickers on a page with one command?

Am 24.06.2015 um 18:41 schrieb Rafael Renan Pacheco [email protected]:

@masteradhoc download 1.4 from "bootstrap-datepicker" repo, delete the js and css from the current datepicker folder at AdminLTE, and put the bootstrap-datepicker.js and bootstrap-datepicker3.css, as well the lang folder, in the datepicker AdminLTE plugin folder.

Then just reference bootstrap-datepicker.js and bootstrap-datepicker3.css in your app.

Does someone know how to put two date input fields with the same name on one page? At the moment i just get one valid field e.g. one field which i get a datepicker..

Change their input ID, and call datepicker for each ID.

—
Reply to this email directly or view it on GitHub.

[rafaelrenanpacheco]

If this global command exists, it is a datepicker feature, so you need to ask in their repo. I didn't see any example about this.

Rafael Pacheco.

[rafaelrenanpacheco]

@masteradhoc

An easy way to address multiple datepickers with one command, is to make use of the jQuery selector to instantiate your datepicker input.

Look at this example:

$('#date_from, #data_to').datepicker()

In this jQuery selector, I specified explicitly both of my ids. Of course you can specify a class which is used in your datepickers, so the command would look like this:

$('.someclass').datepicker()

This will instantiate all datepicker inputs which has the class someclass on it.

[masteradhoc]

Thanks!

Am 20.08.2015 um 05:24 schrieb Rafael Renan Pacheco [email protected]:
@masteradhoc

An easy way to address multiple datepickers with one command, is to make use of the jQuery selector to instantiate your datepicker input.

Look at this example:

$('#date_from, #data_to').datepicker()
In this jQuery selector, I specified explicitly both of my ids. Of course you can specify a class which is used in your datepickers, so the command would look like this:

$('.someclass').datepicker()
This will instantiate all datepicker inputs which has the class someclass on it.

—
Reply to this email directly or view it on GitHub.

[chandranac]

This did the trick for me.....
$(function(){
//Date range picker with time picker
$('#reservationtime').daterangepicker({
timePicker: false, //<==MAKE THE CHANGE HERE
singleDatePicker: true, //<==MAKE THE CHANGE HERE
});
})

[thukten]

This did the trick for me.....
$(function(){
//Date range picker with time picker
$('#reservationtime').daterangepicker({
timePicker: false, //<==MAKE THE CHANGE HERE
singleDatePicker: true, //<==MAKE THE CHANGE HERE
});
})