We Keep Coding

Default value is not set in datetime picker

I am trying to set a default value in my bootstrap datetimepicker, but it doe not set up with the default value.
var fromDate = "2022-08-24T11:24:00";
$('#inputFromDate').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
useCurrent: false,
defaultDate: new Date(new Date(fromDate).setHours(23, 59))
});
And my input field looks like this
<div class="input-group" id="inputFromDate">
<input type='text' id="FromDate" name="FromDate" class="form-control valid" placeholder="From Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Can anyone help with this?

defaultDate: "24/08/2022 11:24";
or
defaultDate: (new Date()).toLocaleString();

Boostrap datetimepicker not pre-filling date

I'm using Boostrap datetime picker to make reservations in fullcalendar.
I would like to pre-fill my datetime piker with the selected date and time when clicking the calendar.
With the following code I can pre-fill the time but not the date and I don't know why. I found that I should just change the format I want to display, but after doing that, the date is not being pre-filled.
select: function(inform) {
var date_from= new Date(inform.startStr);
var date_to= new Date(inform.endStr) ;
let currentDate = new Date();
if (date_from >= currentDate) {
$('#exampleModalToggle').modal('show');
console.log(' date clicked bigger than current date, you can do reservation')
$(".fc-highlight").css("background", "#ffc800", "important!");
$(function() {
$("#start_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
locale: "fr",
useCurrent:false,
defaultDate: date_from,
});
$("#start_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_from,
});
$("#end_date_picker").datetimepicker({
format: 'yyyy-MM-dd',
useCurrent:false,
defaultDate: date_to,
});
$("#end_hour_picker").datetimepicker({
format: 'HH:mm',
useCurrent:false,
defaultDate: date_to,
})
});
}
},
<!--Start Date-->
<div id="start_date" class="add_reservation_subtitles pb-3" style="margin-left: 28px;">
<input id="start_date_input" data-provide="datepicker" name="start_date" type="date"
lang="fr" id="datepicker_second" class="datepicker1" style="margin-left: 28px;" required>
<input name="start_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
<!--End Date-->
<div id="end_date" style="margin-left: 28px;" class="add_reservation_subtitles pb-3 ">
<input id="end_date_input" type="date" lang="fr" class="date-picker"
style="margin-left: 28px;" required>
<input name="end_hour" type="time" lang="fr" class="timepicker modal_rigth_elements"
required>
</div>
I have tried different formats, like yyyy-mm-dd, 'mm-dd-yyyy' , 'mm/dd/yyyy' and nothing is working. I don't even have error messages. So I don't know what is happening.
I'm using this datetimepicker :
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
Thansk a lot for all your help

First Date is the minDate of the second

I have these two datepickers :
<div class="form-group" ng-controller="datepickerpopupCtrl">
<label>Start date:</label>
<p class="input-group">
<input ng-model="task.startdate" name="startdate" type="text" class="form-control"
uib-datepicker-popup="{{format}}"
datepicker-options="options"
is-open="opened"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
show-button-bar="false"
placeholder="startdate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group" ng-controller="datepickerpopupCtrl">
<label>End date:</label>
<p class="input-group">
<input ng-model="task.enddate" name="enddate" type="text" class="form-control"
uib-datepicker-popup="{{format}}"
datepicker-options="optionsEndDate"
is-open="opened"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
show-button-bar="false"
placeholder="Date de fin"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
And I want the enddate (second datePicker) to be limited by the first date startdate.
Now i've tried this :
function datepickerpopupCtrl($scope) {
$scope.dt = new Date();
$scope.open = open;
$scope.opened = false;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.options = {
showWeeks: false,
minDate : new Date(),
startDate : new Date()
};
$scope.optionsEndDate = {
showWeeks: false,
minDate : ($scope.task.startdate == undefined) ? new Date() : $scope.task.dateDebut,
startDate : new Date()
};
function open() {
$scope.opened = true;
}
}
})
but it doesn't work.
Any suggestions will appreciated.thanks

You need to setup a $watch. The reason it's not working is because you are setting the minDate for the second date picker on initialization of your controller. Initially, $scope.task.startdate is undefined, so minDate is assigned new Date() due to your ternary operator. End of story.
Not matter how you change the value of $scope.task.startdate, it's too late because you have already set minDate to new Date() and any changes you make to $scope.task.startdate have no effect.
So, the best way to handle this is to initially set minDate to new Date(), and then setup a watch on $scope.task.startdate:
$scope.optionsEndDate = {
showWeeks: false,
minDate : new Date(),
startDate : new Date()
};
$scope.$watch('task.startdate', function(newValue) {
$scope.optionsEndDate.minDate = (newValue == undefined) ? new Date() : newValue;
});
Or, optionally, you could just assign minDate to be $scope.task.startdate, if you don't care when it's undefined:
$scope.optionsEndDate = {
showWeeks: false,
minDate : $scope.task.startdate,
startDate : new Date()
};
By the way, what the heck is $scope.dateDebut?? I only appears once in your code. Is that a typo?

Angular JS datepicker doesn't update model

I'm trying to filter a table using a daterange, but can't get the model to update so it doesn't know what date I picked.
This is the HTML for the datepicker popup:
<label>From:</label>
<p class="input-group" style="width:200px">
<input type="text" class="form-control" uib-datepicker-popup = "{{format}}" ng-model="dt" is-open="status.opened"
min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
The JS code in my controller:
(function ()
{
'use strict';
angular.module('aml-tech-dashboard.successful-emails').controller('datepickerController', function ($scope) {
$scope.dt = '';
$scope.status = {
opened: false
};
$scope.format = "yyyy-MM-dd"
$scope.minDate = new Date();
$scope.dateOptions = {
//formatYear: 'yy',
startingDay: 1
};
$scope.open = function ($event) {
$scope.status.opened = true;
};
});
})();
Table:
<tr ng-repeat = 'file in files | startFrom: dt'>

Your tr element is wrong. It should look like this:
<tr ng-repeat="file in files | startFrom: dt"></tr>
You also have a mistake in the uib-datepicker-popup directive. It should look like this:
uib-datepicker-popup="{{format}}"
This is assuming you have defined the startFrom filter elsewhere in your module, as it is not a built-in Angular filter.

try this:
$scope.dt = new Date();
and make sure that the controller is invoked when the view render.

disable weekend dates on angular bootstrap datepicker using custom directive

I'm using Angular bootstrap datapicker plugin in my angular app.
I've written a custom directive for the date pickers in my app. And i want to disable the weekends in the date picker at certain places. I've given the functions that disables the weekend dates inside the directive itself.
The function to disable the weekend dates works fine when it is not used inside the directive.
My custom directive:
app.directive('datePic', function(){
return {
restrict: 'E',
scope: {
control: "=ngModel",
min: "=minDate",
max: "=maxDate",
disable: "&dateDisabled"
},
template: '<div class="col-sm-6"><div class="input-group"><input type="text" class="form-control" datepicker-popup is-open="opened1" ng-model="control" min-date="min" max-date="max" date-disabled="disable" close-text="Close" /><span class="input-group-btn"><button type="button" id="btn2" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span></div></div>',
link: function(scope, elem, attrs){
scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
scope.opened1 = true;
};
scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
scope.toggleMin = function() {
scope.minDate = scope.minDate ? null : new Date();
};
scope.toggleMin();
}
}
})
HTML:
<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>From :</label>
<date-pic ng-model="data.leaveFromDate" min-date="minDate" max-date="maxdate" date-disabled="disabled(date, mode)"></date-pic>
</div>
<div class="form-group has-feedback">
<label for="inputEmail3" class="col-sm-3 control-label"><span>*</span>To :</label>
<date-pic ng-model="data.leaveToDate" min-date="data.leaveFromDate" max-date="data.leaveToDate" date-disabled="disabled(date, mode)"></date-pic>
</div>
I dont know how to pass date-disabled="disabled(date, mode)" into the directive so that it is possible to disable weekend dates dynamically.
I have assigned date-disabled inside the directive as disable: "&dateDisabled" and used it in the template as date-disabled="disable".
Any suggestions or guidance much appreciated.
Thank you in advance.

Since you are defining your disabled function within your custom datePic directive, there is no need to pass it in to your custom directive at all.
You do need to make a change to the template within your directive. It needs to reference the disabled function that you have defined in the link function of your custom directive. So it would look like this: date-disabled="disabled(date, mode)".
If you want to only disable weekends sometimes, I would pass in a parameter to your custom directive to control this.
Working Jsfiddle here with the 3 changes above.
If you specifically want to pass in a custom disabled function to your directive, here is a Jsfiddle that does that. Note that the disabled function is now defined outside the directive in a controller.

<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
enter code here
<div ng-app="myApp" ng-controller="myCntrl">
From Date:
<input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="dt" is-open="showdp"
date-disabled="disabled(date, mode)" />
<span>
<button type="button" class="btn btn-default" ng-click="showcalendar($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<script language="javascript">
angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('myApp').controller('myCntrl', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.mindate = new Date();
$scope.dateformat="dd/MM/yyyy";
$scope.today();
$scope.showcalendar = function ($event) {
$scope.showdp = true;
};
$scope.showdp = false;
$scope.disabled = function (date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
});
</script>
</form>