Search Posts

Category: datepicker

how to implement a simple datetime picker in angular 5?

I’m trying to make a datetime picker in Angular 5 but I’m having issues : <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js”></script> <script> angular.module(‘dateInputExample’, []) .controller(‘DateController’, [‘$scope’, function($scope) { $scope.example = { value: new Date(2013, 9, 22) }; }]); </script> <form name=”myForm” ng-controller=”DateController as dateCtrl”> <label for=”exampleInput”>Pick a date in 2013:</label> <input type=”date” id=”exampleInput” name=”input” ng-model=”example.value” placeholder=”yyyy-MM-dd” min=”2013-01-01″ max=”2013-12-31″ required /> <div role=”alert”> <span class=”error” ng-show=”myForm.input.$error.required”> Required!</span> <span class=”error” ng-show=”myForm.input.$error.date”> Not a valid date!</span> </div> <var>value = {{example.value | date: […]

data wont show when using datepicker as querry param

I want to set value of query params with a datepicker, but when I try it the data won’t display. I have include ng-model into my query params but doesn’t work. Here is my .jsfile, I want to pass dt and dt2 into query params in http get app.controller(“repcont”, [‘$scope’,’$http’,function($scope,$http){ $scope.open1 = function() { $scope.popup1.opened = true; }; $scope.open2 = function() { $scope.popup2.opened = true; }; $scope.setDate = function(year, month, day) { $scope.dt = new […]

md-date-picker date format issue with date format

I have this problem. Here is my datepicker <md-datepicker class=”form-control” ng-model=”startDate” md-placeholder=”Enter date”></md-datepicker> The point is that when I select a date, for example the 23rd of September, instead to see 23/11/2017 I see 11/23/2017. So there is a way to specify my date format as dd/MM/yyyy? I tried using ng-model-options attribute but no success. Thanks. Source: AngularJS

issue with mdDatepicker timezone

I have a mdDatepicker input that returned an error saying “Error: the ng-model for md-datepicker must be a Date instance. Currently the model is a string” After some digging, I found this post on github: https://github.com/angular/material/issues/6253 and replaced this piece of code found in the ngMaterial directive: if (value && !(value instanceof Date)) { throw Error(‘The ng-model for md-datepicker must be a Date instance. ‘ + ‘Currently the model is a: ‘ + (typeof value)); […]

Angular Moment Date Picker date time inconsistency

I have an angular 1.5 application where i make use of a moment datepicker library from here : angular moment date picker Everything has worked well until recently when we realized that the date pickers rendered dates wrongly across different user pc’s .It appears this may have something to do with how JavaScript handles time zones: In the image below October 1, 2017 is actually a Sunday but the date picker renders it as a […]

DatePicker being truncated in dataTable

I have several datePicker in a dataTable , and a vertical scroll on that table. The issue is that when i open my datepicker, it doesn’t “pop outside” the datatable, but does something like this: Looking online i found that the solution could be to use the position:relative style on the parent of the datePicker , as stated on the Git page of the datepicker , but it does not seem to work on my […]

ui bootstrap with angularjs date picker not fully show up in modal window

I have a datepicker of ui-bootsrap(1.3) with angularjs(1.5.3). With in wdk modal window the angular application loaded. Inside that there is bootstrap popup modal. it have a datepicker. But it is not show up fully. After click on the visible portion, some of the filed show partly. On mouse over on the calendar it visible. Anyone face this issue. Please help error-image faded date picker Source: AngularJS

dynamic ng-model for md-datepicker in ng-repeat

I dynamically add md-datepicker for date of birth to form by below code: $scope.infData = []; $scope.addInf = function() { if ($scope.infData.length < 4) { $scope.infData.push({}); } }; and my html is like below : <div class=”col-xs-7 col-md-3″ ng-repeat=”d in infData | limitTo: 4″ ng-value=”d.value” ng-class=”{‘md-align-top-left’: $index==1}”> <md-input-container flex> <label>infant D.O.B</label> <md-datepicker onkeydown=”return false” name=”myDate{{$index}}” ng-model=”inf[$index==1].date” md-hide-icons=”all” ng-required=”true” md-current-view=”year” md-min-date=”ctrl.minDate” md-max-date=”ctrl.maxDate” md-open-on-focus=”true” ng-messages> </md-datepicker> and they are limited to 4 . My goal is get […]

Different rule for same Date object on datepicker

this is the continuation of this question. Basically i have an array of dates and i want them to be modifiable by the user, so i loop through the array and bind the dates to a datepicker. the dates are retrieved by an API and processed this way : function(date) { const dateAndTime = date.split(‘ ‘), dateParts = dateAndTime[0].split(‘-‘); dateParts.reverse(); var finalDate = dateParts.join(‘-‘) + ‘ ‘ + dateAndTime[1] + ‘.000’; return new Date(finalDate); } […]

How to disable native datepicker in android chrome on galaxy s4

I’ve run into a strange and peculiar issue recently. I’m working on a website (angular, wp, scss) dhat uses custom date pickers. My date pickers are done and working. Like a charm. With the unfortunate exception of Samsung Galaxy S4 running Chrome 33 – date picker works there, but whenewer I open it, generic selector also shows up. It’s not full date picker, but single choice radio button thingie labeled Date & Time. What’s funny […]

Next Page »