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
Related
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;
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...
using this code
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB"
name="StudentDOB" />
yeilds the following result.
When I change the code to
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB, datepickerOptions: {}"
name="StudentDOB" />
It appears as follows:
Now I want the year and month option while setting my max year to 2014. How do I do this?
The date picker you are talking about is not the the knockout datepicker as there is no such thing. It's the jQueryUI datepicker. The options are in the api documentation on the jQueryUI website: http://api.jqueryui.com/datepicker/
datepickerOptions: { changeYear: true, changeMonth: true, yearRange: '1900:2014' }
http://jsfiddle.net/d4kkg/
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();
}
});
});