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
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 }); }); -
0
Does that go in the Modal controller? or would it go in the function that opens the modal?
-
0
Hi,
You should do it when opening the modal dialog.
-
0
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); }); } }; }); -
0
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.
-
0
That makes sense. Thank you, that actually gives me an idea.
-
0
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
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.
-
0
Unfortatntly I wouldn't be able to email it. It is around 450MB. What are you thinking could possibly be wrong?
-
0
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 }); -
0
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 }); -
0
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 }"
-
0
Awesome, that totally worked. Thank you hikalkan.
-
0
You're welcome :)
