How to get current date on AMP date picker? - amp-bind

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;

Related

How to set minDate and defaultDate together in jquery datepicker

I am trying to show minDate:1 and defaultDate:+3 in datepicker.
$( ".datepicker1" ).datepicker({
dateFormat: "mm-dd-yy",
altFormat: "yy-mm-dd",
altField: "#altField",
minDate: 1
});
$("#TTOCutoffDate").datepicker("option", "defaultDate", 3);
$("#fileDate").datepicker("option", "defaultDate", 3);
If I use html input box, it works as expected.
<input type="text" name="fileDate" id="fileDate" class="datepicker1">
success picture
But If I use html.textboxfor as below, it doesn't work.
<%=Html.TextBoxFor(x => x.TTOCutoffDate, ttoEnabled ? new {#class="datepicker1" } : (object)new {
disabled = "disabled" })%>
TextBoxFor picture
It seems that default date is not set as default date.
How can I make it work with TextBoxFor?
html rendered as below.
<input type="text" name="fileDate" id="fileDate" class="datepicker1 hasDatepicker">
<input class="datepicker1 hasDatepicker" id="TTOCutoffDate" name="TTOCutoffDate" type="text" value="" readonly="" style="background-color: rgb(255, 255, 255);">
Thank you.
You're missing the fileDate ID

Vuejs: Insert date today in input

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>

How to convert date format to DD MMM YYYY in date picker using Bootstrap 4 in angular 8

<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);

datepicker date format little issue

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>

Bootstrap-datepicker not POSTing hidden values correctly

I am using bootstrap-datepicker and need to send both the date selected and a hidden value when user hits the submit button. Code is so:
<div class='input-append date datepicker' data-date=$today data-date-format='mm-dd-yyyy'>
<form class='well' action='Update_Birthday.php' method='POST'>
<input type='hidden' name='ContactID' value=$ContactID>
<input class='span5' size='16' type='text' name='date' readonly>
<span class='add-on'><i class='icon-calendar'></i></span>
<button type='submit' class='btn'>Submit</button>
</form>
</div>
If I click Submit before selecting a date, then ContactID is sent correctly (but date is null of course). When I select a date, then both 'ContactID' and 'date' are identical, i.e. the date selected by the user.
How do I send the date AND hidden values correctly?
Help appreciated.
With this code (essentially what you have already, with quotes added to values):
<div class='input-append date datepicker' data-date='$today' data-date-format='mm-dd-yyyy'>
<form class='well' id='birthdayForm' action='Update_Birthday.php' method='POST'>
<input type='hidden' name='ContactID' value='$ContactID'>
<input class='span5 dateInput' size='16' type='text' name='date' readonly>
<span class='add-on'><i class='icon-calendar'></i></span>
<button type='submit' class='btn'>Submit</button>
</form>
</div>
There's no reason ContactID should be overwritten when a user selects a date.
As for preventing form submission until a date is selected, that will require some JavaScript. I would suggest just prefilling the date input with a value (possibly the previously specified birthday, judging by your code?) - since the field is readonly, users will generally be unable to empty the value, only change the date.
If you prefer to leave it blank, something like this should help:
$('#birthdayForm').on('submit', function(e) {
$('.dateInput').each(function() {
if ($(this).val().length < 1) {
e.preventDefault();
}
});
});