Transmit the bound data (using ng-model) to a custom AngularJS directive

/*I am looking to define the maxDate as vmEndDate*/

   app.directive('myDatepicker', function ($parse) {
        return function (scope, element, attrs, controller) {

            var ngModel = $parse(attrs.ngModel);
            alert(element.val());
            $(function(){
                element.datepicker({
                    showOn:"both",
                   // changeYear:true,
                    //changeMonth:true,
                    dateFormat:'dd-MMMM-yyyy',
                    //maxDate: vmEndDate,
                    minDate: new Date(),
                   // yearRange: '1920:2012',
                    onSelect:function (dateText, inst) {
                        scope.$apply(function(scope){
                            // Change binded variable
                            ngModel.assign(scope, dateText);
                        });
                    }
                });
            });
        }
    });

/*html code */

 <input id="dp" type="text" ng-model="vmEndDate" name="mDate" my-datepicker/>

/Aim: I aim to create a customized date picker with minimum and maximum dates, where the minimum date is today and the maximum date is fetched from the server (vmEndDate)/

Answer №1

Check out this functional demonstration:

app.directive('myDatepicker', function ($parse) {

    return function (scope, element, attrs, controller) {
        var ngModel = $parse(attrs.ngModel);
        var vmEndDate = scope.$eval(attrs.ngModel);
        $(function () {
            element.datepicker({
                showOn: "both",
                // changeYear:true,
                //changeMonth:true,
                dateFormat: 'd-M-yy',
                maxDate: new Date(vmEndDate),
                minDate: new Date() ,
                // yearRange: '1920:2012',
                onSelect: function (dateText, inst) {
                    scope.$apply(function (scope) {
                        // Modify linked variable
                        ngModel.assign(scope, dateText);
                    });
                }
            });
        });
    }
});


    <input id="dp" type="text" ng-model="vmEndDate" ng-init="vmEndDate ='27-Feb-2015'" name="mDate" my-datepicker />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS Error: Attempting to Access Undefined Object - Jasmine Testing

Encountering an error while running Jasmine tests when trying to mock/spy on an API call in the tests. Below is the code snippet responsible for calling the API: UploadedReleasesController.$inject = ['$log', '$scope', '$filter&apo ...

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

Currently, I am in the process of learning nextjs as a beginner. Through the utilization of the getStaticProps function, I have come to understand that data fetching occurs only once at build time and the values remain static thereafter. Despite this, I ...

Troubleshooting CSS override issues when swapping components in ReactJS

Access.js import React from 'react' export default class Access extends React.Component { componentWillMount(){ import ('./styles/access_page.css'); } .... <Link to="/new-account">Sign Up</Link> } Cr ...

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

I'm facing an issue with a drop-down menu where no default value is selected. On my homepage, I need to automatically select an option based on query parameters. I've attempted various methods but none have been successful. Below is the code snip ...

I am facing an issue with the responsiveness of the mat-card component within a div in

Is it possible to display several small paper cards in a div so that they wrap around the container? ...

A method for integrating a Child Component into a UI5 parent application without specifying them in the manifest.json

Seeking advice on loading a Child Component in a UI5 parent app. Currently working on creating a Fiori Launchpad that can dynamically load other apps as Child Components. I have been exploring methods mentioned in an insightful post at However, the imple ...

Determine the selected radio button

----EDIT---- I am developing a jQuery mobile application and I need to determine which radio button is selected. This is the JavaScript code I'm using: function filter(){ if(document.getElementById('segment1').checked) { aler ...

"Utilize Ajax to load PHP content and dynamically refresh a specific div

I have implemented an image uploading system, but now I want to incorporate a feature that allows users to rotate the uploaded images using Ajax. The challenge I'm facing is that if the session variable is lost during a full page update, I need to ens ...

Having trouble including a YouTube iframe code within the document ready function

I am having trouble getting the youtube iframe API code to work properly within my $(document).ready() function. When I try to add the code inside the function, the player does not load. However, when I move the code outside of the document.ready, the play ...

The chosen state does not save the newly selected option

Operating System: Windows 10 Pro Browser: Opera I am currently experiencing an issue where, upon making a selection using onChange(), the selected option reverts back to its previous state immediately. Below is the code I am using: cont options = [ ...

The Mantine date picker is causing an error stating that objects are not valid as a React child

I'm currently experimenting with utilizing Mantine Date in NextJS. The goal is to have the selected date displayed in the HTML text heading when a user clicks on it. For instance, if a user selects January 1st, 2023, the text should show like this: Da ...

Custom HTML binding in expanding rows of Angular 2 DataTables

I am currently working on implementing a data table feature that allows for an extended child row to be displayed when clicking the + icon. This row will show additional data along with some buttons that are bound via AJAX before transitioning to Angular 2 ...

Exporting NativeModules for npm package in React Native

I'm attempting to convert my React Native App into a node module. The issue I'm facing is that the module consists mainly of a NativeModule. Thus, my index.js file appears like this: import { NativeModules } from 'react-native'; expo ...

Encountering an issue while executing grunt-contrib-imagemin

Encountering a permissions issue while attempting to execute the grunt-contrib-imagemin script. The installation of grunt-contrib-imagemin was done as follows: npm install --save-dev grunt-contrib-imagemin Node and npm are both installed in my local user ...

What strategies can I use to keep an element in place while implementing parallax scrolling?

Looking for some assistance with my Codepen project. I am attempting to replicate a layout similar to this BBC article design from the past, but hitting a roadblock with getting my image to be position fixed based on scrolling. I believe that if I can suc ...

Utilize the identical function value within a Vue template

In my template, I am encountering a recurring situation where I need to retrieve a value from a function. This function takes parameters from the template (such as the index of a v-for loop) and returns a result that is then displayed on the template. The ...

Struggling with generating forms using AJAX, Javascript, and HTML depending on the selection made from a drop-down menu

I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquis ...

Implementing a 'Load More' button for a list in Vue.js

I am currently working on adding a load more button to my code. While I could achieve this using JavaScript, I am facing difficulties implementing it in Vue.js. Here is the Vue code I have been working with. I attempted to target the element with the compa ...

Tips on personalizing the vue-filemanager interface within Laravel

I'm currently utilizing the Laravel file manager package from here, which provides a pre-compiled JS file or allows for direct use of the vue-component through npm from here. Unfortunately, in both options, the front-end is not customizable. I have i ...

Vue paginated select with dynamic data loading

My API has a endpoint that provides a list of countries. The endpoint accepts the following query parameters: searchQuery // optional search string startFrom // index to start from count // number of options to return For example, a request with searchQu ...