How to create a datepicker in ddmmyyyy format using angularjs or jquery or jqueryuiI want to display the date in ddmmyyyy in the textbox after clicking on the date from the datepicker without clicking on the submit buttonltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery224jqueryminjs34gtltscriptgtltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs178angularminjs34gtlt

Hi skpYou need to configure to set the formatFor more functionality refer below linkAngularJS Material DatepickerCheck this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtAngularJS Material DatePicker Formatlttitlegt ltlink rel34stylesheet34 href34httpscdnjscloudflarecomajaxlibsangularmaterial104angularmaterialcss34 gt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs144angularjs34gtltscriptgt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs144angularanimateminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs144angularariaminjs34gtltscriptgt ltscript type34textjavascript34 src34httpscdnjscloudflare

Implement DatePicker in dd/mm/yyyy format using Material DatePicker control in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Sep 20, 2019 05:19 AM
Forum: AngularJS
Answer: 1
Views: 10592
Sample Code: Download

How to create a datepicker in dd/mm/yyyy format using angularjs or jquery or jquery-ui.

I want to display the date in dd/mm/yyyy in the textbox after clicking on the date from the datepicker without clicking on the submit button

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/3.0.0/angucomplete-alt.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<input type="text" class="startdate" size="30" />

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Sep 20, 2019 07:31 AM
Report

Hi skp,

You need to configure to set the format.

For more functionality refer below link.

AngularJS Material Datepicker

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS Material DatePicker Format</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngMaterial']);
        app.controller('MyController', function ($scope) {
            $scope.maxDate = new Date();
            $scope.data = { date: new Date() };
            $scope.submit = function () {
                $scope.data.dateString = moment($scope.data.date).format("DD/MM/YYYY");
            }
        });
        app.config(function ($mdDateLocaleProvider) {
            $mdDateLocaleProvider.formatDate = function (date) {
                return date ? moment(date).format('DD/MM/YYYY') : '';
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <md-datepicker ng-model="data.date" md-placeholder="Choose a date" md-max-date="maxDate"></md-datepicker>
        <md-button ng-click="submit()" class="md-primary" type="button">Submit</md-button>
        <p>Selected Date is : {{data.dateString}}</p>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Implement DatePicker in dd/mm/yyyy format using Material DatePicker control in AngularJS

Company

Explore

Follow us

Contact Us