I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?
HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});
Related
After selecting date time from owl date time picker event is not firing.
<label style='margin-right:5px ;margin-left:210px'>
Date Time:
<input [owlDateTimeTrigger]="dt" [owlDateTime]="dt" class="form-control" placeholder="Date time Picker" (change)="getScheduledTime($event)">
<owl-date-time #dt ></owl-date-time>
</label>
Let Try this once, It's working fine tested,
Html File,
<input placeholder="Date Time:"
[(ngModel)]="dateTime"
[owlDateTimeTrigger]="dt" [owlDateTime]="dt"
(ngModelChange)="onChange($event)" <!--here added -->
>
Typescript,
onChange(data) {
alert("Triggered" + data);
console.log("Triggered", data);
}
Screenshot,
I hope its solve your problem.
Thanks,
Muthukumar
you can use ngModelChange for this
(ngModelChange)="getScheduledTime($event)"
I am developing webpage in which i have used text field and set it's type as time. But it is giving me 00:00 AM/PM format.
I want 00:00:00 as time format.
use jquery timepicker
$(function(){
$('#example').timepicker();
});
check this link
Just add the step attribute to the element. Note: You might want to implement your own time type if you need cross-browser support. input<type=time> does not work in Safari.
<input type="time" step="1">
In case you need own implementation, here it is. Requires no third part library. To access the value just get the value of the timepicker div
using document.getElementById("timepicker").getAttribute("data-value");
function updateTime()
{
function getFormattedValue(value)
{
return value>9?value:"0"+value;
}
var hour = document.getElementById("hour").value,
minute = document.getElementById("minute").value || 0,
second = document.getElementById("second").value || 0;
var time = getFormattedValue(hour)+":"+getFormattedValue(minute)+":"+getFormattedValue(second);
var timeelem = document.getElementById("timepicker");
timeelem.setAttribute("data-value", time);
console.log(time);
console.log(timeelem.getAttribute("data-value"));
}
<div id="timepicker" data-value="">
<input id="hour" type="number" max="23" min="0" onchange="updateTime()">
<input id="minute" type="number" max="59" min="0" onchange="updateTime()">
<input id="second" type="number" max="59" min="0" onchange="updateTime()">
</div>
How can I disable each individual datepicker if the date model is less than the current date or if the date has "expired".
I am developing a UI with datepickers for start and end dates. Initially, the UI can have as many datepickers as needed depending on the data returned from a backend. Users can also add more date pickers.
Here is a sample data I am using to build datepickers with ngRepeat.
{
"id": 1234,
"seasons": [{
"endDate": "2016-01-03",
"startDate": "2015-09-10",
"description": "2015"
}, {
"endDate": "2017-01-03",
"startDate": "2016-09-10",
"description": "2016"
}]
}
I am creating a UI where users can change dates via datepickers only if the start and end date has not expired. In cases where the date has expired the datepicker needs to be disable.
Here is my UI for reference.
My current approach is to iterate through seasons array and check if the startDate is less than today.
ss.datePickerStartDateEnabled = false;
angular.forEach(ss.seasonSet.seasons, function(season, key) {
if (season.startDate < today) {
console.log('Less than today');
ss.datePickerStartDateEnabled = true;
}
});
So far it works but it disables startDate that is not less than today.
Here's my html
<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index">
<div ng-controller="DatePickerCtrl as datePicker">
<div class="col-md-3"> <!-- StartDate datepicker-->
<div class="form-group has-feedback">
<label for="username">Start Date</label>
<input
type="text"
class="form-control"
id="startDate{{$index}}" <!-- id=startDate1 -->
uib-datepicker-popup="{{}}"
ng-model="s.startDate"
is-open="datePicker.isOpen.startDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
ng-disabled="ss.datePickerStartDateEnabled"
close-text="Close"
ng-click="datePicker.open($event, 'startDate')"/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
<div class="form-group has-feedback">
<label for="username">End Date</label>
<input
type="text"
class="form-control"
id="endDate+{{$index}}"
uib-datepicker-popup="{{}}"
ng-model="s.endDate"
is-open="datePicker.isOpen.endDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
close-text="Close"
ng-click="datePicker.open($event, 'endDate')"/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
How could I use id="endDate+{{$index}}" in the datepicker input along with the ng-disabled="ss.datePickerStartDateEnabled" and ss.datePickerEndtDateEnabled in my controller to disable a single date picker based on the condition from above.
There are other validations that I need to do e.g. no overlapping dates and start date must be after the previous end date. I am trying to solve the easy case first.
Thanks in advance. Here is the the plunker code and here is the UI, tho the datetime picker is not working. See it full screen for better UI.
Using ng-disabled on the input is the right approach.
Your comment,
So far it works but it disables startDate that is not less than today.
Makes me think that your date comparison may be flawed, for example, if they are comparing different date formats. After the date comparison, disabling the input via ng-disabled should be all there is to this.
You also have some semantic confusion in
ng-disabled="ss.datePickerStartDateEnabled"
Where it essentially says "disable if enabled".
I was able to solve this problem using the following pattern.
I delegated the UI logic to disable datepicker(s) if the date has expired to my DatePickerCtrl.
angular.module('someApp')
.controller('DatePickerCtrl', ['$filter', function($filter) {
var datePicker = this;
datePicker.dateOptions = {
formatYear: 'yy',
startingDay: 1,
};
var today = $filter('date')(new Date(), "yyyy-MM-dd");
datePicker.startDateDisable = startDateDisable;
datePicker.endDateDisable = endDateDisable;
datePicker.open = open;
//Useful to manage more than one datepicker in the same view
//E.g. datepickers created in a ngRepeat
datePicker.isOpen = {};
function open($event, which) {
$event.preventDefault();
$event.stopPropagation();
datePicker.isOpen[which] = true;
}
function startDateDisable(startDate) {
return startDate <= today ? true : false;
}
function endDateDisable(endDate) {
return endDate <= today ? true : false;
}
//Date format could come from user's profile preferences
datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
datePicker.format = datePicker.formats[2];
}])
The startDateDisable(startDate) and endDateDisable(endDate) functions are the only relevant ones.
Next, I used ng-disabled directive on the datepicker input as such:
<div class="form-group has-feedback">
<label for="username">Start Date</label>
<input
type="text"
class="form-control"
id="startDate{{$index}}"
uib-datepicker-popup="{{format}}"
ng-model="s.startDate"
is-open="datePicker.isOpen.startDate"
datepicker-options="datePicker.dateOptions"
ng-required="true"
ng-disabled="datePicker.startDateDisable(s.startDate)"
close-text="Close"
ng-click="datePicker.open($event, 'startDate')"
date-validation/>
<span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>
The relevant code is ng-disabled="datePicker.startDateDisable(s.startDate)" where s.startDate in my input model. The DatePickerCtrl is responsible for managing the UI state. The data comes from another controller.
The same logic applies for endDate.
I have this code in my html and my input is empty without any value, although the html tag "value" has some value.
<input id="DataCompra" value="07/10/2014" class="form-control ng-pristine ng-valid"
name="DataCompra" type="text"
close-text="Fechar"
data-val="true"
data-val-date="The field Data Compra must be a date."
data-val-required="O campo Data Compra é obrigatório."
date-type="string"
datepicker-popup="dd/MM/yyyy"
is-open="DataCompra.open"
ng-click="DataCompra.open = true"
ng-model="DataCompra.dt"
show-button-bar="false"
show-weeks="false">
in Controller ,
$scope.DataCompra.dt = new Date('2014-10-07');
remove value attribute from the Html part,
may be this will also work,
add new directive like this
<input id="DataCompra" value="07/10/2014" ng-init="DataCompra.dt = '2014-10-07' .....
remove value attribute from the Html part,')"
Following solution worked for me
<input type="text" data-provide="datepicker" class="form-control" data-ng-model="Date" name="Date" id="inputDate">
$('#inputDate').datepicker().on('changeDate', function (ev) {
alert("selected date is " + $(ev.target).val());
$scope.Date = ev.date;
});
I have this dojo TimeTextBox in the HTML:
<input type="text" id="startTime" value="" dojoType="dijit.form.TimeTextBox"></input>
and this JS code:
dojo.addOnLoad(
function(){
var sartTime = dijit.byId('startTime');
}
)
So how do I format the time to look like HH:mm am|pm
Use the constraints.timePattern attribute:
<input type="text"
id="startTime"
value=""
dojoType="dijit.form.TimeTextBox"
constraints="{timePattern:'h:mm a'}" />
You'll still get a Date object when you ask the TimeTextBox for its value though. To actually get a string on the format HH:mm am|pm| you have to convert it manually afterwards.