DatePicker on model #940 | Support Center

princedis created 10 years ago

How to place a datepicker (without time) on a create model popup?

12 Answer(s)

0

hikalkan created 10 years ago
Support Team

Hi,

Have you checked the Metronic sample: <a class="postlink" href="http://www.keenthemes.com/preview/metronic/theme/admin_4_material_design/components_date_time_pickers.html">http://www.keenthemes.com/preview/metro ... ckers.html</a>

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

princedis created 10 years ago

If am not mistaken, I need to download the bootstrap and angular plugin and save it to lib, and then update "ScriptPath.cs" and "AppBundleConfig.cs" accordingly... and then use the directive right......?

If you have any step by step doc it would b great.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ismcagdas created 10 years ago
Support Team

Hi,

We dont have such document but your steps are correct.

By the way you can use daterangepicker in singledate mode which is already included in solution. You can check it here <a class="postlink" href="http://fragaria.github.io/angular-daterangepicker/">http://fragaria.github.io/angular-daterangepicker/</a>

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 9 years ago

I am having this exact same issue on my Create Modal. I cannot get any of the date picker to display. Even the default date range picker is not rendering.

Here is a screenshot of the Google chrome console showing that all the scripts are present on the page, yet the calendar is not displayed? [https://drive.google.com/open?id=0B5HAoiVVXzY7d1liWTFmZG9kblk])

I am working on the MPA JQuery MVC solution.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
ismcagdas created 9 years ago
Support Team
Hi,

Since modals are loaded dynamically, you need to convert your input to datetime in your modal's init function like this.

$('.datepicker').datepicker();

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

exlnt created 9 years ago

I added it as shown below. It did not work, until I placed the code at the end of my script.

(function ($) {
    app.modals.CreateNurseHomeModal = function () {

        //Did not work here
        //$('.datepicker').datepicker();

        var _nurseHomeService = abp.services.app.nurseHome;
        var _$form = null;
        var _modalManager;

        this.init = function (modalManager) {
            _modalManager = modalManager;

            //Did not work here
            //$('.datepicker').datepicker();

            _$form = _modalManager.getModal().find('form[name=CreateHome]');
            _$form.validate();
        };

        this.save = function () {
            if (!_$form.valid()) {
                return;
            }

            var home = _$form.serializeFormToObject();

            _modalManager.setBusy(true);
            _nurseHomeService.createNurseHome(
                home
                ).done(function () {
                abp.notify.info(app.localize('SavedSuccessfully'));
                _modalManager.close();
                abp.event.trigger('app.createNurseHomeModalSaved');
                location.reload();
            }).always(function () {
                _modalManager.setBusy(false);
            });
        };
    };

    //Works here, but shows JQuery datepicker
    $('.datepicker').datepicker();

})(jQuery);

However the above code renders the JQuery calendar? [https://drive.google.com/open?id=0B5HAoiVVXzY7WG01cnk4bGZlMEE])

0
ismcagdas created 9 years ago
Support Team
Hi,

Sorry I misguided you.

There are three bootstra-date*** libraries in metronic. AspNet Zero includes bootstrap-daterangepicker by default. You can insert either bootstrap-datepicker or bootstrap-datetimepicker.

If you choose bootstrap-datepicker, you should call it in the init method of your modal like this. (I haven't tried this but it should work)

$('.datepicker').datepicker();

If you choose bootstrap-datetimepicker, then you should trigger it like this same way.

$('#datepicker').datetimepicker();

I have tried this and it seems like it is working.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 9 years ago

Thanks for the reply!

It turns out that the Bootstrap_DatePicker and Bootstrap_DateTimePicker were not in the "libs" folder.

I added those folders and updated the script paths file and it finally worked!

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ismcagdas created 9 years ago
Support Team

I should have told you this in the first place but anyway it is solved :).

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

nlshcc98765 created 9 years ago

If you don't mind me asking, how are you retrieving the value from the DateTime picker? Can you share the HTML on the modal and the JS file?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ismcagdas created 9 years ago
Support Team

Hi,

Is this the same issue with this one #2969@402ec519-2a33-4a9f-b384-9502b873ed16 ?

Thanks.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

nlshcc98765 created 9 years ago

Yes. Looking for a working model.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

Have an answer to this question? Log in and write your answer.