We Keep Coding

Setting current date and default time in angular datepicker

I want to set the default date to current date and customize default time in a datepicker using Angular, e.g Current date: 07-02-2020 and default custom time should be 08:00 AM. How can i achieve this please. Here is my html code which only shows date and time based on value selected.
<label class="col-sm-12 col-md-8 form-control-label ml-2" for="date_from">{{'From Date' |
translate}} <span class="danger">*</span>:</label>
<div class="col-md-12">
<input type="datetime-local" [(ngModel)]="leaveList.date_from"
[max]="leaveList.date_to" class="form-control input-md" id="date_from"
name="date_from" (change)="onChangeDate()" max="9999-12-31">
</div>
.component.ts file

You need to use moment library for date/time formatting
1-install moment using npm i moment
2-You have to assign value to date_from in your .ts, just like that
leaveList.date_from = moment().format('MM-DD-YYYY 8:30A')

<input required class="form-control" [(ngModel)]="myDate" type="datetime-local" name="myDate" id="myDate"/>
you can customize the date as you want instead of using new Date()
this.myDate = this.datepipe.transform(new Date(), 'yyyy-MM-ddThh:mm'),
so you have to import DatePipe
import {DatePipe} from '#angular/common'
and initialize in the constructor
constructor(public datepipe: DatePipe){
}
and also add it int the app.module.ts as a provider
providers: [
DatePipe,
....
],
read more https://angular.io/api/common/DatePipe

Setting minDate with a variable with flatpickr

Couldn't find any answers on related threads or on the flatpickr documentation so posting here hoping for a miracle.
I'm using flatpickr and have to set a minDate based on a variable.
var $date = $('#calendar').data('date');
console.log ($date); // this will return the correct value
$("#calendar").flatpickr( {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Ymd",
minDate: $date ,
maxDate: new Date().fp_incr(60), // 60 days from now
disableMobile: "true",
});
And on my page I have
<input id="calendar" placeholder="Pick a date" data-date="{{ "now"|date("Ymd") }}" >
I'm using twig so my console.log will return today's date but it has no impact on the minDate.
In the future the minDate will not be today's date, I just used it to test.
In an older version of flatpickr you could set these types of variables directly in instead of in the js code, but it seems like it's unfortunately not in use anymore.

According to flatpickr documentation
Date Strings, which must match the dateFormat chronologically
YYYY-MM-DD HH:MM
So, "now"|date("Ymd") is invalid, try "now"|date("Y-m-d")
https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr

DYNAMIC SOLUTION
We can set a minimum date for flatpickr dynamically
Let's say we have a shipping date field and we do not want it to be earlier than the payment date
flatpickr("#shipping_date", {});
<div class="form-group row">
<label for="shipping_date" class="col-form-label text-right">Shipping Date</label>
<input type="text" class="form-control" name="shipping_date" id="shipping_date" value="" data-toggle="flatpickr">
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
We can set a minimum date for shipping date field when document loaded like that
flatpickr("#shipping_date", {});
var payment_date = '2022-08-06';
$(document).ready(function(){
const element = document.querySelector("input[name=shipping_date]");
element._flatpickr.config.onOpen.push(function(dateObj, dateString, flatpickrInstance) {
var minimumDate = moment(payment_date).format('YYYY-MM-DD');//e.x. payment_date -> 2022-08-06
var minimumDateVars = minimumDate.split('-');
flatpickrInstance.set('minDate', new Date(parseInt(minimumDateVars[0]), parseInt(minimumDateVars[1]) - 1, parseInt(minimumDateVars[2])));
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<div class="form-group row">
<label for="shipping_date" class="col-form-label text-right">Shipping Date</label>
<input type="text" class="form-control" name="shipping_date" id="shipping_date" value="" data-toggle="flatpickr">
</div>
Full Code
Code Pen

How to show always days on datepicker when is open?

I'm using eonasdan-bootstrap-datetimepicker:
<input type="text" class="form-control" ng-model="$ctrl.date" id="dateStart">
<script type="text/javascript">
$("#dateStart").datetimepicker({
format: 'ddd, D MMMM YYYY',
showTodayButton: true
});
</script>
What I want to achieve is that everytime I close the picker and reopen it I'll always have the days picker.
Right now If I'm in the "datepicker-months" and click outside, the picker will close and if I reopen it it will show the months view again, but I want the days one.
I tried with:
on('dp.show', function(e) {
$(".datepicker-days").show();
$(".datepicker-months").hide();
$(".datepicker-years").hide();
$(".datepicker-decades").hide();
});
This ways looks like it's working: if I close it during months view and reopen it I'll get the days datepicker, but if from here I click on the month again I'll get the datepicker-years..
Any help would be appreciated.
EDIT:
Code here:
http://jsfiddle.net/xrqkyypd/51/

The answer is pretty much straightforward using events and viewMode function.
You only must check that when the picker get hide then you reset his viewMode to which ever you want, in this case the days view.
$('#myDatepicker').on('dp.hide', function(e) {
$('#myDatepicker').data("DateTimePicker").viewMode('days')
});

According with documentation, you can set like this:
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years' //days, weeks etc
});
});
</script>
</div>
For more details check view mode

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this

Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});

see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/

try using step: 60 not steps
please check this link also :click here

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.