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

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

Automatically Adjust Text Size to Fit Input Forms using jQuery

Does anyone know how to use jQuery to dynamically change the font size in a form input field so that it always remains visible and fits even as the user types more text? I want the font size to start at 13px and progressively shrink as the text reaches the ...

Presenting a dynamic selection of files from a database in a dropdown menu with looping functionality using Laravel

I have a dropdown menu that I want to use to display input files from the database based on the selection made. Here is the scenario: When a dropdown option is chosen, it should show input files derived from the "loop_atachment" table (based on the select ...

Error: The internal modules of node.js encountered an issue while loading causing an error to be thrown at

After installing Node.js (LTS version) from their website on my Windows system, I created a new directory named "mynode" and placed a text file inside it called "hellonode.js". Upon trying to run node hellonode.js in the command prompt after changing direc ...

What is the process for choosing with multiple attribute selectors?

Is there a way to disable multiple fields in a checkbox survey simultaneously? I attempted the following code, but it only works with one class. Is it possible to select by multiple classes within the same div? function surveyInit(){ $("div[class*=&apos ...

Can you explain the meaning of `<%= something %>` to me?

I've been working on a javascript project and I'm curious about the purpose of surrounding a variable with this syntax? <%= variable %> I attempted to research it myself but didn't come across any helpful information, so my apologies ...

Prevent repetitive content on your Node.js server

After realizing my small image hosting has many duplicate content, I am looking for a solution to prevent this issue in the future. My idea is to use either checksum or hash code so that whenever a new file is uploaded, it will be hashed and compared with ...

Retrieve the element by its id using JavaScript even when there are no form tags present on the webpage

Is it possible to retrieve an element by its ID using JavaScript when there is no form tag available? I am trying to obtain the value of a textbox with the following command, but I keep receiving a 'null or undefined' error message. It works cor ...

Difficulty encountered while setting up jQuery slider

I am struggling to set up a jquery slider (flexslider) It seems like I am overlooking something very fundamental, but for some reason I just can't figure it out. Any assistance would be greatly appreciated. Please check out the link to the test site ...

Incorporate the JavaScript file fetched from NPM into the app.js code

New to using node and npm, I recently set up my main JavaScript file called app.js and configured webpack nicely. Inside app.js, I currently have the following script: //require in jquery var $ = require('jquery'); //require a constructor f ...

Learn how to extract substrings from a variable within an API using Vue.js

Exploring VueJs for the first time and looking to split a string by comma (,) retrieved from an API into separate variables. The data is coming from a JSON server. "featured-property": [ { "id": "1", " ...

What are some methods to activate a scope watch within a directive?

I'm attempting to activate my directive code using a scopewatcher: var gMaps = function($timeout, $q, GeoCoder, mockdataService) { return { restrict: 'EA', template: '<div class="gmaps"></div>', ...

Is there a way to achieve a XNOR-like response with necessary input?

I'm currently working with a form that looks like this: <form> <input type="text" name="input1"> <input type="text" name="input2"> <button type="submit"> ...

Adding External JS Files to a Node.js Project

I recently discovered how to incorporate a JS file into Node JS. However, I am facing an issue with two JS files in particular - hashing.js and encoding.js. Within encoding.js, I have the following code: exports = exports || {}; exports.encoding = encodi ...

Pinia has not been instantiated yet due to an incorrect sequence of JavaScript file execution within Vue.js

I'm currently developing a Vue.js application using Vite, and I have a Pinia store that I want to monitor. Below is the content of my store.js file: import { defineStore } from 'pinia'; const useStore = defineStore('store', { st ...

Gradually returning to the top with Vuetify's smooth scroll feature

Looking for a way to make the scrolling back to the top of the page smoother on my website. The button I currently have in place does the job, but it's not as smooth as I would like. Any suggestions on how to improve this? I've checked similar q ...

Click on a plane within a three.js environment to determine the X Y position within it

When using a raycaster, I can successfully obtain the current object (in this case, a plane) under the mouse. However, I am seeking a more precise X and Y value for the mouse position INSIDE the plane. var vector = new THREE.Vector3( ( event.clientX / win ...

What is the best way to retrieve a {collection object} from a JavaScript map?

My application utilizes a third-party library that returns the map in the following format: public sids: Map<SocketId, Set<Room>> = new Map(); When I try to access it using the code below: io.of("/").adapter.sids.forEach(function(va ...

"Looking to programmatically close a modal in JavaScript that was opened using the 'data-target' attribute? Here's how you can

I have a modal template embedded in the same HTML file as my controller. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDeleteItem">Delete selected item</button> < ...

Having trouble with a single GET request not functioning properly on Safari due to an Authorization issue in Angular 6

I've encountered this issue in several locations, yet haven't found a clear solution. Only one GET request is showing as unauthorized (401), but when I check the debugger, everything seems to be fine and all other requests are functioning properl ...