Trying to add Datepicker plugin to solution #1808 | Support Center

joe704la created 10 years ago

I am having issues getting the datepicker from the Metronic theme working.

I added my scripts to the ScriptPaths.cs file and styles to StylePaths.cs file. And also the AppBundleConfig.cs file.

Then in my modal controller where I want to use the date picker I added the below function. Then call that function in the init() method of the modal controller.

var ComponentDateTimePickers = function () {
    var handleDatePickers = function () {

        if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                orientation: "left",
                autoclose: true
            });
        }
    }

    return {
        //main function to initiate the module
        init: function () {
            handleDatePickers();
        }
    };
}();

Oh and also I did try the date range picker singular version which did work but I didn't like how I couldn't choose a different year without having to scroll to the date. This is a date of birth field so for some people having to scroll through 30 or so years is horrible design.

14 Answer(s)

0
ismcagdas created 10 years ago
Support Team
Hi,

Can you try to execute datepicker plugin code in modal's shown event like this.

modal.on('shown.bs.modal', function () { modal.find('.date-picker').datepicker({ orientation: "left", autoclose: true }); });

Markdown is supported

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

joe704la created 10 years ago

Does that go in the Modal controller? or would it go in the function that opens the modal?

Markdown is supported

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

ismcagdas created 10 years ago
Support Team

Hi,

You should do it when opening the modal dialog.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
joe704la created 10 years ago
Thank you.

One more question. Do you know how to format the date on the model binding? In my text box when editing a date it shows it in the following format. 2016-10-19T00:00:00Z. I want it to show as 10/19/2016 instead. I know how to do it in a view such as {{vm.renter.dob | date:"MM/dd/yyyy"}} but I cannot do it that way in the text box.

I don't know Angular very well but I found an example online of someone creating a directive to handle this, below is the code for the directive. It actually works and puts it in the format I want it in, but for some reason it takes one day off of the date no matter what date I set. So for example if I set the date to 1/24/2016, after I reload the view it will say 1/23/2016. But the super weird thing is in the database it will be the correct date.

appModule.directive('date', function (dateFilter) { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { var dateFormat = attrs['date'] || 'MM/dd/yyyy'; ctrl.$formatters.unshift(function (modelValue) { return dateFilter(modelValue, dateFormat); }); } }; });

Markdown is supported

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

ismcagdas created 10 years ago
Support Team

Hi,

AspNet Zero Spa project includes a angularjs filter. You can also use that one <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/5fef9a8e7b894fd9586eba9f8dc50bbd3e629b2f/src/MyCompanyName.AbpZeroTemplate.Web/App/common/filters/momentjs-filters.js">https://github.com/aspnetzero/aspnet-ze ... filters.js</a>.

The one day problem might be related to your timezone selection. Can you check what date is sent to server via Google Chrome's network tab on developer console.

Markdown is supported

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

joe704la created 10 years ago

That makes sense. Thank you, that actually gives me an idea.

Markdown is supported

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

joe704la created 10 years ago

I was able to get Datepicker to work just fine in a normal view but not Modal.

The code you wanted me to try

modal.on('shown.bs.modal', function () {
    modal.find('.date-picker').datepicker({
        orientation: "left",
        autoclose: true
    });
});

Doesn't work because I open the modal differently. Below shows an example how I do it. How exactly would I be able to do something similar to what you suggested in the below method of opening a modal?

function openCreateOrEditPetModal(renterId, petId) {
                var modalInstance = $uibModal.open({
                    templateUrl: '~/App/common/views/renters/createOrEditPetModal.cshtml',
                    controller: 'common.views.renters.createOrEditPetModal as vm',
                    backdrop: 'static',
                    resolve: {
                        renterId: function () {
                            return renterId;
                        },
                        petId: function () {
                            return petId;
                        }
                       
                    }

                });


                modalInstance.result.then(function (result) {
                    init();
                });
            }

0

ismcagdas created 10 years ago
Support Team

Hi,

Can you send your project to <a href="mailto:[email protected]">[email protected]</a> if it is not a problem ? I think there is a different problem, I want to check it by running the project.

Thanks.

Markdown is supported

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

joe704la created 10 years ago

Unfortatntly I wouldn't be able to email it. It is around 450MB. What are you thinking could possibly be wrong?

Markdown is supported

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

Let's continue like this then. I'm not actually sure about it.

Can you try couple of things.

after you open the modal, can you check the value of jQuery().datepicker in developer console.

after you open the modal, did you tried to run this code ? And does it convert your input to a datepicker ?

$('.date-picker').datepicker({ orientation: "left", autoclose: true });

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
joe704la created 10 years ago
if I put the code below directly in the console, after the modal is open then it works. Does that give you any ideas of where I should be putting that?

jQuery('.date-picker').datepicker({ orientation: "left", autoclose: true });

Markdown is supported

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

hikalkan created 10 years ago
Support Team

I didn't read the whole discussion, but it seems your datepicker is created after your js works. If you are using Angularjs, this is a common case since angular dynamically creates it. The solution can be adding these 2 attributes in your date picker input element:

ui-jq="datepicker" ui-options="{ orientation: 'left', autoclose: true }"

Markdown is supported

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

joe704la created 10 years ago

Awesome, that totally worked. Thank you hikalkan.

Markdown is supported

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

hikalkan created 10 years ago
Support Team

You're welcome :)

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.