Base solution for your next web application
Open Closed

DatePicker on model #940


User avatar
0
princedis created

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


12 Answer(s)
  • User Avatar
    0
    hikalkan created
    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>

  • User Avatar
    0
    princedis created

    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.

  • User Avatar
    0
    ismcagdas created
    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>

  • User Avatar
    0
    exlnt created

    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.

  • User Avatar
    0
    ismcagdas created
    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();
    
  • User Avatar
    0
    exlnt created

    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])

  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    exlnt created

    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!

  • User Avatar
    0
    ismcagdas created
    Support Team

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

  • User Avatar
    0
    nlshcc98765 created

    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?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

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

    Thanks.

  • User Avatar
    0
    nlshcc98765 created

    Yes. Looking for a working model.