I need to prevent future dates in an HTML template. The date picked date value is forwarded to Vue to be further analyzed. Here is the code.
<div class="container text-center justify-content-center container-user">
<h1 class="text-center">Ciao <span v-model="user_name">{{username}}</span></h1>
<br>
<h2 >
Seleziona la data: [[date.day]]
</h2>
<br>
<form #submit.prevent="getUpdates">
<input type="date" v-model="date.day" class="disableFuturedate"/>
<button class="btn btn-primary" type="submit">Seleziona</button>
</form>
</div>
I need to find a solution using possibly vue.js or Javascript.
Thank you really much for your help!
You can define variable to hold current date in data object, then set it as max value:
new Vue({
el: "#app",
data() {
return {
username: 'Amico',
date: {day: ''},
maxDate: new Date().toISOString().split('T')[0]
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container text-center justify-content-center container-user">
<h1 class="text-center">Ciao <span>{{username}}</span></h1>
<h2 >
Seleziona la data: {{date.day}}
</h2>
<form #submit.prevent="getUpdates">
<input type="date" v-model="date.day" :max="maxDate" class="disableFuturedate"/>
<button class="btn btn-primary" type="submit">Seleziona</button>
</form>
</div>
</div>
You can use the max attribute to achieve this:
<input type="date" v-model="date.day" max="2021-09-05" />
You can set that to be today using JavaScript:
<input type="date" v-model="date.day" id="datePicker" />
<script>
function formatToday() {
let today = new Date();
let year = today.getFullYear();
let month = ('0' + (today.getMonth() + 1)).slice(-2);
let day = ('0' + today.getDate()).slice(-2);
return year + '-' + month + '-' + day;
}
document
.getElementById("datePicker")
.setAttribute("max", formatToday());
</script>
Users can bypass this, so make sure to verify it before using it.
Related
I am making a Flask web application and I have created a part that uses JavaScript. I am trying to link my calendar.js file to my calendar.html file but the js file is not being read.
My html templates extend my base.html template, in which I have written a code block
{% block jscript %}
{%endblock%}
this is located at the bottom of the body tag because in the calendar.js file I reference some HTML elements by Id.
in calendar.html, which extends base.html, I have written
{% block jscript %}
<script type="module" src="{{url_for('static',filename='calendar.js')}}"></script>
{% endblock %}
I have also tried
<script type="text/javascript" src="{{url_for('static',filename='calendar.js')}}"></script>
and
<script type="text/javascript" src="..\static\calendar.js"></script>
I am however getting errors in my JS code saying that my HTML elements are null when I try to get them by id.
here is all of calendar.html (which isn't finished yet):
{% extends "base.html" %}
{% block title%}Calendar{% endblock %}
{% block webcontent %}
<h3 align="center">Calendar</h3>
<br/>
<p align="center">Hey! This is your calendar. Here you can add, update or delete events!</p>
<div class="container" align="center">
<form method='POST'> <!--web form to create an event object-->
<h3 align="center">Create Event</h3>
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" class="form-control" id="eventName" name="eventName" placeholder="What is the name of the event?"/>
</div>
<div>
<label for="startDate">Start Date</label>
<input type="date" class="form-control" id="startDate" name="startDate"/>
</div>
<div>
<label for="endDate">End Date</label>
<input type="date" class="form-control" id="endDate" name="endDate"/>
</div>
<div>
<label for="startTime">Start Time</label>
<input type="time" class="form-control" id="startTime" name="startTime"/>
</div>
<div>
<label for="endTime">End Time</label>
<input type="time" class="form-control" id="endTime" name="endTime"/>
</div>
<div>
<label for="eventInfo">Description</label>
<input type="text" class="form-control" id="eventInfo" name="eventInfo" placeholder="Event Info"/>
</div>
<div>
<label for="eventLocation">Location</label>
<input type="text" class="form-control" id="eventLocation" name="eventLocation" placeholder="Location"/>
</div>
<br/>
<button type="submit" class="btn btn-primary">Add Event</button>
</form>
</div>
<br/>
<div id="calContainer">
<div id="header">
<div id="monthView"></div>
<div>
<button id="previousMonth">Previous Month</button>
<button id="nextMonth">Next Month</button>
</div>
</div>
<div id="weekdays">
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
<div>Sunday</div>
</div>
<div id="calCalendar"></div>
</div>
<div id="modalBackDrop"></div>
{% endblock %}
{% block jscript %}
<script type="module" src="{{url_for('static',filename='calendar.js')}}"></script>
{% endblock %}
here is all of calendar.js (which isn't finished yet):
//setting global variables
let currentMonth = 0; //incremented or decremented to display each month.
let clicked = null; //the day that the user has clicked on
const monthView = document.getElementById('monthView');
const calCalendar = document.getElementById('calCalendar');
const weekdays = ['Monday', 'Tuesday', 'Wednesday' , 'Thursday', 'Friday', 'Saturday', 'Sunday'];
function loadCal() {
const dateObj = new Date();
if (currentMonth !== 0) {
dateObj.setMonth(new Date().getMonth() + currentMonth); //changes the value of the current month shown by adding/subtracting the number of times the back or forward button is pressed
}
const day = dateObj.getDate();
const month = dateObj.getMonth();
const year = dateObj.getFullYear();
const firstDayInMonth = new Date(year, month, 1); //gets the date for the first day in the month
const daysInMonth = new Date(year, month + 1, 0).getDate(); //gives whatever the date is for the last day in the month.
const dateString = firstDayInMonth.toLocaleDateString('en-uk', { //ensures that uk timezone/calendar is used
weekday: 'long',
day: 'numeric',
month: 'numeric',
year: 'numeric',
});
const emptyDays = weekdays.indexOf(dateString.split(', ')[0]); //splits the value of dateString (Weekday, dd/mm/yyyy) to extract the Weekday part
monthView.innerText = `${dateObj.toLocaleDateString('en-uk', { month: 'long' })} ${year}`; //prints string of month and year above calendar
calCalendar.innerHTML = ''; //clears the calendar div upon reloading to ensure that only one calendar is printed
for(let i = 1; i <= (emptyDays + daysInMonth); i++) { //increments through the days in the month
const daySquare = document.createElement('div'); //creates a div for each day
daySquare.classList.add('day'); //so that all day divs have the proper formatting
const dayString = `${i - emptyDays}-${month + 1}-${year}`;
if (i > emptyDays) { //if it has iterated more times than there are empty squares in that month then it should actually create a day square
daySquare.innerText = i - emptyDays; //ensures that the correct day number is printed inside the square
for (var i = 0; i < eventnamesLength; i++) {
console.log(eventnames[i]);
const eventDiv = document.createElement('div');
eventDiv.classList.add('event');
eventDiv.innerText = (eventnames[i]);
daySquare.appendChild(eventDiv)
}
daySquare.addEventListener('click', () => console.log('click'));
} else {
daySquare.classList.add('empty'); //creates different style for empty squares
}
calCalendar.appendChild(daySquare);
}
}
function buttons() {
document.getElementById('nextMonth').addEventListener('click', () => {
currentMonth++;
loadCal();
}) //when the next month button is clicked, the current month value increments by +1 and the calendar is reloaded to show the next month
document.getElementById('previousMonth').addEventListener('click', () => {
currentMonth--;
loadCal();
}) //when the previous month button is clicked, the current month value decrements by -1 and the calendar is reloaded to show the previous month
}
buttons();
loadCal();
I have used vue-date-picker and v-model for two way data binding. Initially I have set value to date(i.e. startDate in this case) and in console I am printing that passed value(i.e. startDate). At first, that passed value to startDate (i.e. 2019-09-17 is printed) but when I chose new Date, startDate value didn't get updated rather value remained same as it was when it was initially passed.
<div class="col-md-3">
<label for="startDate" class>Start Date</label>
<datepicker v-model="startDate" :readonly="true" format="YYYY-MM-DD" name="startDate">
</datepicker>
</div>
<p>Start Date: {{startDate}}</p>
<div class="col-md-2">
<div class="md-form mb-0">
<button type="button" class="btn btn-primary" #click="showDateValues">Apply</button>
</div>
</div>
import datepicker from "vue-date-picker";
<script>
import datepicker from "vue-date-picker";
export default {
name: "Example",
components: {
datepicker
},
data() {
return {
startDate: "2019-09-17"
};
},
methods:{
showDateValues(){
console.log("Start Date: "+this.startDate)
}
}
};
</script>
try this:
data() {
return {
startDate: new Date("2019-09-17")
};
},
var elm = new Vue({
el: '.app8',
mounted () {
var vm = this
$('#datedate').datepicker ({
onSelect: function(dateText) {
vm.date = dateText
}
})
});
<div class="row mt-5">
<div class="col">
<div class="app8">
<input v-model="date" name="date" class="input" type="date" id="datedate">
</div>
</div>
</div>
Hope this will help
I'm creating a web app in angularJS with ASP.NET, here is my JavaScript of a datepicker:
$('#sandbox-container input').datepicker({
autoclose: true
});
$('#sandbox-container input').on('show', function (e) {
console.debug('show', e.date, $(this).data('stickyDate'));
if (e.date) {
$(this).data('stickyDate', e.date);
} else {
$(this).data('stickyDate', null);
}
});
$('#sandbox-container input').on('hide', function (e) {
console.debug('hide', e.date, $(this).data('stickyDate'));
var stickyDate = $(this).data('stickyDate');
if (!e.date && stickyDate) {
console.debug('restore stickyDate', stickyDate);
$(this).datepicker('setDate', stickyDate);
$(this).data('stickyDate', null);
}
});
The code in ASPX is the following:
<div id="sandbox-container" class="row">
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="datefrm" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="From" date-only />
</div>
</div>
<div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-2">
<div class="row">
<input type="text" ng-model="dateto" date-format="dd-MM-yyyy" class="textboxandbutton" placeholder="To" date-only>
</div>
</div>
</div>
The current format is MM/dd/yyyy. This is how the date is showing:
02/08/2017
I need to change the date format to:
dd-MM-yyyy
The data which I want to see is:
08-02-2017
All the help is appreciated!
Just add format option of datepicker:
format: 'dd-mm-yyyy'
Please find below snippet for more information
$('#sandbox-container input').datepicker({
autoclose: true,
format: 'dd-mm-yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<div id="sandbox-container">
<input type="text" type="text" class="form-control" />
</div>
The following code will work:
var date = "01/24/1977";
var datearray = date.split("/");
var newdate = datearray[0] + '-' + datearray[1] + '-' + datearray[2];
I have an angularJS using WCFrest Project
I create dropdownlist and datepicker for parameter to filter showed data.
Search Form can be seen on picture below
This is the html code
<!--Date From-->
<div class="col-md-4">
<input id="txtOldDate" type="date" value="2000-01-01" class="datepicker" />
</div>
<!--Date To-->
<div class="col-md-1">
<label for="labelTo" class="control-label">To</label>
</div>
<div class="col-md-4">
<input id="txtNewDate" type="date" class="datepicker" />
<!-- Set default date value to now-->
<script>
document.getElementById('txtNewDate').value = new Date().toISOString().substring(0, 10);
</script>
</div>
<!--Departement-->
<div class="col-sm-4">
<div class="dropdown">
<select class="form-control" ng-model="DdlDeptManager" ng-change="DdlManager(DdlDeptManager)">
<option ng-repeat="d in GetDeptManager" value="{{d.Department}}">{{d.Department}}</option>
</select>
</div>
</div>
<!--Employee-->
<div class="dropdown">
<!-- #departemen parameter from DdlDeptManager -->
<select id="ddlManagerApproval" ng-model="DdlManager" class="form-control">
<option ng-repeat="m in GetManager" value="{{m.UserName}}">{{m.FullName}}</option>
</select>
</div>
<!--Button Show-->
<div class="col-md-2">
<input id="btnSubmit" type="button" class="btn btn-primary" ng-click="SearchApproval()" value="Show" />
</div>
This is my control approvalCtrl.js
//Control for search purposes
$scope.SearchApproval = function() {
var search = {
//employeeID: $scope.employeeID,
oldDate: $scope.oldDate,
newDate: $scope.newDate,
departemen: $scope.departemen,
approver: $scope.approver
}
var promiseGet = GetApproval.GetApprovalData(search);
//GetApprovalData();
promiseGet.then(function(pl) {
$scope.GetApprovalData = pl.data
},
function(errorPl) {
console.log('Some Error in Getting Records.', errorPl);
});
}
This is the service.js, for employeeID because the session is not created, i forced add value to it on the uri
this.GetApprovalData = function(employeeID, oldDate, newDate, departemen, approver) {
return $http.get("http://localhost:51458/ServiceRequest.svc/GetApproval?employeeID=" + "11321" + "&oldDate=" + oldDate + "&newDate=" + newDate + "&departemen=" + departemen + "&approver=" + approver);
};
My Question is, how to make the value on datepicker id = txtOldDate to give a paramater value to oldDate, txtNewDate to newDate, and other dropdownlist to departemen and approver parameter?
Thanks in Advance.
Hi Randy I have reproduced your code without service sorry for that. Used hardcode array to populate dropdown. Kindly check this url
https://plnkr.co/edit/eSriV68HkhQhzt1yE6DE?p=preview
$scope.GetDeptManager = [{
Department : 'department1'
}, {
Department: 'department2'
}];
$scope.GetManager = [{
FullName : 'manager1'
}, {
FullName: 'manager2'
}]
And you have to assign ng-model values for your input elements so that you will get those values in controller.
I've been trying out this AngularJS package (https://www.npmjs.com/package/angularjs-datepicker) and was struggling to use the date-set property. In my example I have 2 calendars, 1 that should display yesterdays date and 1 that should display todays date. Could someone please help me set these dates?
Datepicker:
<div class="datepicker-container">
<div class="date-from">
From:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
<div class="date-too">
To:
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{}}" class="date-picker">
<div class="input-group">
<input class="form-control" placeholder="Choose a date"/>
<span class="input-group-addon" style="cursor: pointer">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</datepicker>
</div>
</div>
Setting the date:
$scope.dateFrom = new Date();
$scope.dateTo = new Date();
var date = new Date();
$scope.today = date; //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date;
Using date-set:
From the documentation linked above, https://www.npmjs.com/package/angularjs-datepicker . I see you have to pass date object as string to attribute date-set , hence convert the date object to string.
//js
var date = new Date();
$scope.today = date.toString(); //to show today's date
date.setDate(date.getDate() - 1); //to get yesterday's date, Ref:http://stackoverflow.com/questions/5511323/javascript-yesterday
$scope.yesterday = date.toString();
//html
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{today}}" class="date-picker">
<datepicker date-format="dd/MM/yyyy" selector="form-control" date-set="{{yesterday}}" class="date-picker">
see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>
I solved it in a simpler way, just activated the ng-if attribute in the div before the datepicker
pagamentoService.getCronograma(moment().year()).then(function (resp){
var cronogramas = resp.data;
console.log('99',resp.data);
cronogramas.forEach(function (obj){
vm.datasBloqueadas.push(moment(obj.data_limite).format('YYYY-M-D'));
});
}).catch(function (err){
console.log(err);
});
<div class="col-md-4 mt-1">
<label>data vencimento</label>
<div ng-if="Beneficios.datasBloqueadas.length > 0" class="input-control full-size text">
<datepicker date-format="yyyy-MM-dd" date-disabled-dates="{{Beneficios.datasBloqueadas}}" >
<input id="dataVencimento" class="required" type="date" date-converter ng-model="Beneficios.view.data_filter"
data-role="hint" data-hint-background="bg-orang-e"
data-hint-color="fg-white" data-hint-position="bottom" data-hint-mode="2">
<button class="button" onclick="$('#dataVencimento').focus();">
<span class="mif-calendar"></span>
</button>
</datepicker>
</div>