<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
type="text"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
import { BsDatepickerConfig } from'ngx-bootstrap/datepicker';
export class CardlessTransactionsComponent implements OnInit {
datePickerConfig: Partial<BsDatepickerConfig>;
privatetodayDate: Date = newDate();
minDate: Date;
maxDate: Date;
}
constructor(privatefb:FormBuilder) {
this.todayDate = newDate();
this.minDate = newDate();
this.maxDate = newDate();
this.minDate.setDate(this.minDate.getDate() - 7);
this.maxDate.setDate(this.maxDate.getDate() + 0);
at the HTML file, I think there is something need to do inside the bsValue while at the ts file, I have no idea where to change to get the output that I want which is to make it display the month's name instead of the month numeric value
You should get today's date through a formControl instead of outside it to get this working...
relevant HTML:
<div class="row">
<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
formControlName="dateMDY"
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
</div>
working stackblitz here
Thanks for the suggestions, i have already figure it out. (make changes at the TS file)
initializeForm () {
this.cardlessForm= this.fb.group ({
dateFrom:new Date(),
dateTo:new Date ()
});
}
I just add the 'new Date ()' at the dateFrom and dateTo then i removed the code ( this.maxDate.setDate(this.maxDate.getDate() + 0);
Related
I am using an input for the date. How do we set the Input to display the Date Today? Thank you for your time.
<div class="form-group">
<label>Debarred</label>
<input v-model="form.debarred" type="date" name="debarred"
placeholder="Debarred"
class="form-control" :class="{ 'is-invalid': form.errors.has('debarred') }">
<has-error :form="form" field="debarred"></has-error>
</div>
You can update the model value form.debarred on page load like:
this.form.debarred = new Date().toLocaleDateString('en-CA');
//==> "2020-04-03"
Now, using .toLocaleDateString('en-CA') is need here as <input type="date"> value can only accept a string representing a date in YYYY-MM-DD format, or empty.
DEMO:
const debarred = document.querySelector('[name=debarred]');
debarred.value = new Date().toLocaleDateString('en-CA');
<div class="form-group">
<label>Debarred</label>
<input type="date" name="debarred" placeholder="Debarred" class="form-control">
<has-error :form="form" field="debarred"></has-error>
</div>
I put a new datepicker into a admin page and it lets me select the date needed but when I had data-date-format="yyyy/mm/dd" as dd/mm/yyyy, it would not save the date in the database and would save it as 0000-00-00 so I changed the format to data-date-format="yyyy/mm/dd" and it works now and saves the date correctly now in the database but is there any way I can have the date format as dd/mm/yyyy in the input field as it currently shows as 2019/10/22
The code I have is below
<div id="exstdate" class="col-lg-6 input-group date" data-date-format="yyyy/mm/dd">
<input type="text" class="form-control" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><div class="error alert-danger"></div>
</div>
<script>
$(function () {
$("#exstdate").datepicker({
language: "en",
autoclose: true,
todayHighlight: true,
dateFormat: 'dd/mm/yyyy'
}).datepicker('update', new Date());
});
</script>
I have an AMP datepicker. I want to display current date at the bottom of datepicker when datepicer is rendered.
I am trying something like this. but it doesnot desplay current date.
<amp-date-picker
id="departure-date-pickerOW1"
media="(max-width: 52rem)"
date="P0D"
type="single"
mode="overlay"
layout="container"
class="flex flex1"
number-of-months="1"
day-size="36"
input-selector="[id=departure-dateOW1]"
on="activate:AMP.setState({curr_date: departure-date-
pickerOW1.today})">
<input type="text" title="departure date" id="departure-dateOW1"
class="date-field departure-date" placeholder="Departure date">
</input>
<span class="ico-sprites ico-calendar absolute"></span>
<template type="amp-mustache" info-template >
<span [text]="curr_date">current date</span>
</template>
</amp-date-picker>
Try something like this:
HTML:
<input type="text" title="departure date" id="departure-dateOW1"
class="date-field departure-date" placeholder="Departure date" value="{DATE_TODAY}>
PHP:
<?php
$date = date();
$template = file_get_contents('my_template.html'); // YOUR HTML
$output = str_replace('{DATE_TODAY}',$date, $template);
echo $output;
ngx-bootstrap has a custom implementation for datepicker locales.
As my project is already using moment.js locales, i'm wondering is it possible to use moment.js locales with ngx-bootstrap datepicker?
yes, you can use both the follow way:
<div class="row">
<div class="col-xs-12">
<label>Date</label>
<input [(ngModel)]="distributionDate"
required tabindex="2"
class="form-control"
placeholder="please select a date"
bsDatepicker
[bsConfig]="{ dateInputFormat: 'MMMM D, YYYY', containerClass: 'theme-red' }"
(onHidden)="dateIsValid('distributionDate')"/>
</div>
</div>
[bsConfig]= that use format defined by moment.
(onHidden)= event that is executed when you out of field
you can define in some service to consume or only in your component.
dateIsValid(fieldName) {
if (!isNullOrUndefined(this[fieldName])) {
if (moment(this.formatDate(this[fieldName]), 'MMMM D, YYYY', true).isValid()) {
this[fieldName] = this.formatDate(this[fieldName]);
this.errors[fieldName] = false;
return true;
} else {
this.errors[fieldName] = true;
return false;
}
}
}
I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works.
<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
v-model="sale.cancelDate"
v-bind:class="{ 'has-error': !validation.cancelDate }"
v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>
The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...
var self = this;
$(self.el).datepicker({
startDate: self.params.startDate,
endDate: self.params.endDate,
todayBtn: "linked",
autoclose: true
});
How can I get the start-date to appear dynamically?
I post an example here:
//script.js
new Vue({
el:"#app",
data:function(){
return {
startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
cancelDate: moment().format('MM/DD/YYYY')
}
},
ready:function(){
$('.datepicker').datepicker({ startDate: this.startDate });
}
})
// index.html
<div id="app">
<input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>
https://jsfiddle.net/nosferatu79/jfk97gp9/4/
Hope this help...