Customize your Kendo AngularJS Date picker to display formatted date by setting ng-model from timestamp

Here is a date time picker I have set up based on the documentation provided at this link:

<input kendo-date-picker
                     k-options="monthSelectorOptions"
                     ng-model="milestone.estimate"
                     k-ng-model="dateObject" />

The date time picker has the following options:

// SET OPTIONS FOR DATE TIME PICKER
$scope.monthSelectorOptions = {
    format: "dd.MM.yyyy",
    change: $scope.onDateChange
};

I am wondering how to automatically format the date from a timestamp represented by:

ng-model="milestone.estimate"

Additionally, after selecting a date from the picker, I would like the value in the scope to be updated with the timestamp but display the formatted date in the date picker.

If this is possible, could you please provide guidance on how to achieve it?

Thank you for any advice you can offer.

javascriptangularjsdatekendo-uidatepicker

Answer №1

If you're looking to format dates in AngularJS, consider using the date filter provided by AngularJS. It's conveniently demonstrated in the example you shared:

<div class="demo-section k-content" ng-controller="MyCtrl">
    <div class="box-col">
        <h4>Select date:</h4>
        <input kendo-date-picker
         ng-model="dateString"
         k-ng-model="dateObject" />

Scrolling further down... 

dateObject: {{ dateObject | date:"EEEE, MMMM d, yyyy" }}

This snippet will display the date in a way that aligns with your requirements. For more information, refer to the documentation here:

https://docs.angularjs.org/api/ng/filter/date

Answer №2

Make sure to utilize the parseFormats attribute of the kendo property to inform kendo of the input format.

parseFormats: ["dd/MM/yyyy'T'HH:mm:ss"] // for example, 11/03/2015T18:05:00

Within your settings:

// CONFIGURE OPTIONS FOR DATE TIME PICKER
 $scope.monthSelectorOptions = {
    format: "dd.MM.yyyy",
    parseFormats: ["dd/MM/yyyy'T'HH:mm:ss"], // for example, 11/03/2015T18:05:00
    change: $scope.onDateChange
 };

Answer №3

When working with Angular code to format dates, it is important to utilize the formatDate function. This function can be called by using ng-change on the input and passing your ng-model along with it. Since the ng-model is also linked to the kendo calendar, applying the ng-change will format the ng-model accordingly.

    function formatDate(selectedDate) {
        return $filter('date')(selectedDate, 'yyyy-MM-dd HH:mm:ss');
    }

$scope.formatDate = function(selectedDate){
       return $filter('date')(selectedDate, 'yyyy-MM-dd HH:mm:ss');
}

Don't forget to inject this into your controller: $filter

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

Tips for updating a specific object's value within an array of objects in Mongoose and MongoDB

I want to implement an award system and I'm exploring the most efficient approach to achieve this. Each time a specific award is earned, I need to increase its corresponding value by one. Here is what my model structure looks like: const CardSchema ...

javascriptmongodbexpressmongoose

Using JavaScript to validate birth date selection along with three drop down menus in ASP.Net

Currently, I have implemented a functionality using three drop down controls to prompt users to select their birth date. In order to validate the selected date, I have incorporated JavaScript code in all three drop down "onChange" events. The function is ...

javascriptasp.netvalidationdrop-down-menu

Babel fails to substitute arrow functions

After setting up babel cli and configuring a .babelrc file with presets to es2015, I also installed the es2015 preset. However, when running the command babel script.js --out-file script-compiled.js, I noticed that arrow function syntax (=>) was still p ...

javascriptnode.jsecmascript-6browserifybabeljs

dual slider controls on a single webpage

I am attempting to place two different sliders on the same page. When I implement the following code for one slider, it functions correctly: <h3>Strength of Belief</h3> <div class="slidecontainer"> <div class="slider_left"> < ...

javascripthtml

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

javascriptangularjswebpack

Looking to automatically scroll to the bottom by clicking on text using javascript/jquery?

I am currently working on a website project where I have a specific requirement. I need the webpage to scroll towards the bottom when a particular text is clicked, using JavaScript/jQuery. <p class="ml-2 mb-2 d-flex view_profile_options"><a hre ...

javascriptjqueryhtmlscrollhover

Protractor and Jasmine fail to fulfill the promise of retrieving a webpage title

I am facing an issue with my protractor/jasmine test code where it only prints out 1 and 2, then hangs and times out. It seems like there might be a problem with the click() action on the button element or the promise on the getTitle method of the browser ...

javascriptangularjsselenium-webdriverjasmineprotractor

Tips for adjusting the reCAPTCHA popup to fit within the dimensions of a mobile screen

When attempting to debug an application, I encountered an issue with the reCAPTCHA window. The placement of the window is a bit off, causing the Verify button to be out of view. This prevents me from progressing past that page as I am unable to confirm the ...

javascripthtmlcssrecaptcha

sending information back to a middleware using a resolved promise

As a newcomer to nodejs, I am facing an issue with retrieving data from a function that returns a promise. The response from the middleware needs to be sent back to the front end. Below is the relevant code snippet: // Middleware app.get('/player&apo ...

javascriptnode.jsexpresspromise

Having trouble with Rails 6 Bootstrap 4 Modal staying open after submitting?

Everything is working smoothly with Open Modal, but I am facing an issue with closing the modal. Here are the relevant files: Inside client.haml (the client layout) = link_to t('.mail to admin'), blame_path(@admin), remote: true routes.rb get ...

javascriptruby-on-railstwitter-bootstrapbootstrap-4

Achieving smooth transitions with CSS3 when removing a class

I've been attempting to implement animation transitions on a removed class, but unfortunately it's not working as expected. I referenced this link: CSS transition when class removed I have tried setting the transition on the parent element and o ...

javascripthtmlcssreactjsanimation

Issue with custom validator in Angular 6: setTimeout function not functioning as expected

Currently, I am in the process of following a tutorial to implement Asynchronous validation in Angular. The goal is to create a custom validator named shouldBeUnique that will be triggered after a 2-second delay. To achieve this, I have utilized the setTim ...

javascriptangulartypescriptangular6

Transform a collection of objects into an array

In my data array, I have various groups and types: const data = [ { groupName: 'groupName1', types: [ { name: 'name1', displayName: 'displayName1' }, { name: 'name2&apos ...

javascriptarraysobject

Perform an Ajax call just one time

$('#addToCart').click(function () { let csrf = $("input[name=csrfmiddlewaretoken]").val(); let trTable = $(this).parents('div')[1]; let customPrice = $($(trTable).children('div') ...

javascriptjqueryajax

Updating ng-table within an Angular controller

Having encountered an unusual issue with ng-table. Here is a snippet of code from my controller: this.category = "Open"; this.category = ["Open", "Accepted", "Rejected"]; this.dataItems = []; var _this = this; this.$scope.$watch("vm.category", function( ...

javascriptangularjsngtable

Need help with checking for the presence of a value in a multidimensional array using Node.js/Javascript?

Imagine you have an array structured like this: $game = Array ( ['round'] => Array ( ['match'] => Array ( ['player_2'] => Array ( ...

javascriptarraysnode.js

One class seems to be causing issues with hover functionality while the other works perfectly fine

HTML: <div class="channellist"></div> Through the use of Ajax, I am able to dynamically retrieve channels when the page loads and then append them within the channellist container. Once appended, my HTML structure appears as follows: <div ...

javascriptjquery

Trouble encountered while retrieving the data structure in order to obtain the outcome [VueJs]

I am facing an issue while trying to save information from an HTTP request into a structure and then store it in local storage. When I attempt to retrieve the stored item and print a specific value from the structure, it does not work! Here is my code: / ...

javascriptvue.jsvuejs2

Issue with UnhandledPromiseRejectionWarning in Mongoose/Typescript even with catch block

I'm facing an issue with an UnhandledPromiseRejectionWarning in my code. The specific scenario involves a Mongoose Index named 'id', where I am testing the insertion of a duplicate ID that should be handled appropriately. router.post(' ...

javascripttypescriptpromise

A recursive approach to filling empty space on a canvas using Javascript

My goal was to develop a recursive function that would continue filling the empty spaces of a canvas until reaching the edges or encountering a different colored space. function createFillingPoint() { let x = points[0][0], y = points[0][1]; var pat ...

javascriptvue.jsrecursioncanvashtml5-canvas