How to get datepicker value with formcontrol - javascript

I have a problem with storing value to formcontrol using datepicker. Here is the example:
<div class="col-12 scol-sm-6 col-md-3 col-xl-3">
<div class="form-group">
<label>Эхлэх огноо</label>
<input
id="salaryTransferStartDate"
class="form-control daterange-basic"
#salaryTransferStartDate
/>
</div>
</div>
In my ts file:
$("#salaryTransferStartDate").daterangepicker({
singleDatePicker: true,
startDate: moment().format("YYYY-MM-DD"),
locale: {
format: "YYYY-MM-DD"
},
onClose: dateText => {
this.configurationForm
.get("salaryTransferStartDate")
.setValue(dateText);
}
});
But my formControl value = null. What am i doing wrong ? I am using angular 7.

It is always better to avoid use of Javascript in angular.
In this case on select of datepicker usually change not reflected in Model as you are not typing values using keyboard.
can you try:-
$('#salaryTransferStartDate').datepicker({
format: "dd/mm/yyyy",
autoclose: true
})
.on('changeDate', function(e){
e.target.dispatchEvent(new Event('input'));
e.target.dispatchEvent(new Event('change'));
});;
<input type="text" size="5" maxlength="100" id="yuyuy"
[ngModel]="fromDate" class="form-control cal_date"
placeholder="Enter {{displayName}}">
The answer is for template driven. you can also test in reactive and let me know. I also got stuck in similar situation and trigger input work for me. If have issues let me know

Related

Bootstrap Datetimepicker Display twice

I am getting the problem to display datetimepicker. i got the datetimepicker twice when i click id of shankar. I mentioned the screenshot below
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
$('#shankar').datetimepicker();
This code will help you:
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datepicker('show').on('changeDate',function(ev){
$('.datetimepicker').hide();
});
});
</script>
Please check , if you have defined a custom editor Templates for DateTime, and setting the class .datepicker there. its possible you are doing explicit duplicate initialization of calender control.
As you are using bootstrap ,bootstrap-datepicker.js initializes the all nodes which has .datepicker class without explicit instruction.
Remove the explicit initialization in your function.
source
You can try:
setTimeout(function(){
$('.dpdatetimepicker').datetimepicker({
startDate: new Date(start_date),
todayBtn: "linked",
orientation: "bottom auto",
daysOfWeekHighlighted: "5",
todayHighlight: true,
autoclose: true
});
},1000);

Disable ui bootstrap datepicker if the date is less than the current date - Angularjs ngRepeat

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.

Bootstrap datepicker: second field to allow dates later than the selected date on first field

When user selects a date on the first field, the second field must start on the selected date, and disallow any selection of previous date. I created a fiddle for reference
http://jsfiddle.net/gfokvuxr/ and here is the code:
Thank you
<label class="form-label">Loading Date</label>
<div class="input-append success date">
<input type="text" name="loadingdate" id="dt1" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
<label class="form-label">Delivery date</label>
<div class="input-append success date">
<input type="text" name="deliverydate" id="dt2" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
this is the JS code
$('.input-append.date').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: new Date()
});
Based on my reading of the API, it would be thus:
$('#loadDate').change(function(event, ui){
$('#deliverDate').datepicker( "setDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
$('#deliverDate').datepicker( "option", "minDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
});
https://jsfiddle.net/1a09hyff/1/
Give each datepicker an ID and use those to register an event listener on the first to update the second's minDate.
That said, it isn't working for some reason; I can't get any of the modification methods (including destroy) to actually work. A couple throw internal errors (I've been seeing a lot of those lately, where date.getMonth() throws getMonth is not a function etc).

OnSelect datepicker doesn't work

i've got a probleme with my date picker. I need to custom this datepicker but when i try to custom them it doesn't work.
Example:
I have this html code:
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" data-target="#job-date_start" name="date_start" title="" id="datestart" class="xlarge required" readonly>
<input type="hidden" id="job-date_start" value="" name="job[date_start]" />
</div>
And on javascript i try that:
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
},
});
And my problem is, when i click on a date in my datepicker the console.log(test) don't appear.
Thanks you
Inlcude jquery and jquery ui libraries and then on document ready add your code http://jsfiddle.net/m443no17/
$(document).ready(function () {
$('#datestart').datepicker({
onSelect: function (date) {
alert(date);
},
});
});
Ofcourse , it will work the way you wrote . But , is not needed if you are having only one helper.
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
}
});
Hope you have imported all the libraries required for datepicker and ofcourse jQuery proper version.
FYI :- Your DOM should be ready before you are executing this script

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!
Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});
I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Categories