I've got this line of code
<h3> <script>Date.now</script>{{$flow.files[0].name}} </h3>
Basically All i'm wanting to do is put the date infront of the filename thats generated from the {{}}.
It currently shows nothing, The unix timestamp might be better but i can only get it to show text that i type infront.
I have tried {{Date.now(); $flow.files[0].name}} Which hasn't worked.
If you want to do it with JavaScript like your first attempt, you should have something like this:
<div ng-app="app">
<span id="dateHere"></span> - {{fileName}}
<script>
document.getElementById("dateHere").innerHTML = Date();
</script>
</div>
and if you want to have more control on your date format:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app='app' ng-controller='Ctrl'>
<span id="dateHere"></span> - {{fileName}}
<script>
document.getElementById("dateHere").innerHTML = Date();
var date = new Date();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var customDate = currentMonth + '-' + currentDate + '-' + currentYear;
document.getElementById("dateHere").innerHTML = customDate;
</script>
</div>
<script>
angular.module('app', []).controller('Ctrl', function($scope){
$scope.fileName = 'your file name';
})
</script>
-> on Plunker
Try something like this:
Controller:
$scope.myDate = new Date();
HTML:
{{myDate | date: 'MMM d, y h:mm:ss a' }} {{$flow.files[0].name}}
I used the filter date to format the date.
Related
I don't know Javascript or PHP and I've tried my best finding an answer online but without the basic knowledge I have no clue how to do this. I am sure there are many people like me who are stuck.
My situation is that I need to insert a delivery date by somehow fetching the current date and adding 7 days to it, then input it to the "YYYY-MM-DD" field in the code below.
The best answer I've found is here but I have no clue how to implement it
This is the full code, please help me figure out how to structure it:
<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
async defer>
</script>
<script>
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render(
{
// REQUIRED
"merchant_id":"xxxxxxxxxx",
"order_id": "{BOOKINGNUMBER}",
"email": "{EMAIL}",
"delivery_country": "ISO 3166-2:CA",
"estimated_delivery_date": "YYYY-MM-DD",
// OPTIONAL
"opt_in_style": "CENTER_DIALOG"
});
});
}
</script>
<!-- END GCR Opt-in Module Code -->
sevenDaysFromNow will get the current date and time, then I will set it to current date and time + 7 days.
You can read about setDate / getDate here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate
Then I am using formatDate function to convert it to yyyy-mm-dd.
Conversion date format was taken from here
Format JavaScript Date to yyyy-mm-dd
This is the result:
<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
async defer>
</script>
<script>
var sevenDaysFromNow = new Date().setDate(new Date().getDate() + 7);
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render(
{
// REQUIRED
"merchant_id":"xxxxxxxxxx",
"order_id": "{BOOKINGNUMBER}",
"email": "{EMAIL}",
"delivery_country": "ISO 3166-2:CA",
"estimated_delivery_date": formatDate(sevenDaysFromNow),
// OPTIONAL
"opt_in_style": "CENTER_DIALOG"
});
});
}
</script>
<!-- END GCR Opt-in Module Code -->
In AngularJs I get a date in this format : ["2018-01-03T09:30:54.264Z"].
I want it to be in the format : "2018-01-03T09:30:00"
How can I get it in this format?
Controller.js
var myDate = new Date();
$scope.form.date.push(myDate);
template
<div class="col-lg-12 photo-container" ng-repeat="photo in selectedPhotos track by $index" ng-if="add">
<input id="myDate" type="datetime-local" name="date[]" ng-model="form.date[$index]">
<img ng-src="{{photo}}" class="thumb">
</div>
You are not being clear about how you are doing it, but here is a working example (work from it):
var app = angular.module('myApp', []);
app.controller('dateCtrl', function($scope) {
$scope.form = {
"date": []
};
for (let i = 0; i < 5; i++) {
var myDate = new Date();
$scope.form.date.push(myDate);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="dateCtrl">
<div ng-repeat="date_ in form.date track by $index">
<div>1: {{ date_ | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<div>2: {{ form.date[$index] | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<br/>
</div>
</div>
</body>
</html>
you can use moment.js to achieve that i.e.
var d = moment("2018-01-03T09:30:54.264Z").format('YYYY-MM-DDThh:mm:ss') .
it will give you the required format, put whatever format you want as string in format() function.
first inject $filter to your controller then try this:
var myDate = new Date();
myDate = $filter('date')(myDate , "YYYY-MM-DDThh:mm");
$scope.form.date.push(myDate);
I am trying to dynamically disable date (jquery datepicker) which is already in database. I have done static method in that I am able to achieve goal but not getting success in dynamic approach
<script language="javascript">
$(document).ready(function () {
var getfromdb = #Html.Raw(#ViewBag.bookdate);
var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\'';
var disableddates = [result];
var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [disableddates.indexOf(string) == -1];
}
});
And here is my controller code:
List<string> getbookdate = new List<string>();
getbookdate = BookDate(id);
ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList());
public List<string> BookDate(int? id)
{
DateTime dt = System.DateTime.Now.Date;
var getbookdate = (from x in entity.BookingMasters
join
y in entity.BookingDetails on x.BookingId equals y.BookingId
where x.ProductId == id && y.FromDate > dt && y.ToDate > dt
select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList();
List<string> allDates = new List<string>();
foreach (var r in getbookdate)
{
for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1))
{
allDates.Add(Convert.ToString(date.ToShortDateString()));
}
}
return allDates;
}
Disable doesn't work well with date picker. Try my plnkr.
https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/
It gets the datepicker on click and parses through the dates and data set given and if a match is found it removes the click event on it. and repeats on each render please see my plnkr link for html. Hope it helps
<!--Disable doesn't work well with date picker. Try this. Hope it helps-->
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ -->
<!--Code-->
<!--HTML PART-->
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether#*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script data-require="jqueryui#*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body class="container">
<h1>Hello User</h1>
<div class="box">
<div class="box-content">
<div class="row">
<div class="col-md-4">
<label>Date:</label>
<input type="text" id="date-picker-control" />
</div>
</div>
</div>
</div>
<script>
var element = $('#date-picker-control');
element.datepicker();
element.off('click').on('click', function() {
// Setup DatePicker
console.log('Update Date Picker');
// If user changes month or year, update date picker
// based on the date list you have
$("#ui-datepicker-div")
.find("div.ui-datepicker-header")
.find('a.ui-datepicker-next, a.ui-datepicker-prev')
.on('click', function() {
element.click();
});
// Get all available dates in current displayed dates
var availableDates = $("#ui-datepicker-div")
.find("table.ui-datepicker-calendar")
.find('td[data-handler="selectDay"]');
availableDates.filter(function(i) {
var targetDateElement = $(this);
//Get date parts
var year = +targetDateElement.data("year");
var month = targetDateElement.data("month") + 1; //JS fix
var day = +targetDateElement.find('a.ui-state-default').text();
var builtDate = month + '/' + day + '/' + year;
// you can substitute your json data
var targetDates = [
"10/2/2017", "10/6/2017", "10/8/2017"
];
$.each(targetDates, function(i, targetDate) {
// If builtDate match targetdate then turn click event oFF on that date
if (targetDate == builtDate) {
targetDateElement.css({
'border': '1px solid gray',
'background': 'darkgray',
'font-weight': 'bold',
'color': 'gray'
}).off('click');
}
});
});
});
</script>
</body>
</html>
Your original idea is in the right direction, but I think there's probably something weird going on with all the string conversion. I'd just pass through dates and compare with dates rather than all the stringy stuff:
I've written this quick test...
controller:
//Replace with however you get dates
ViewBag.DatesList = new List<DateTime>()
{
new DateTime(2018, 01, 01),
new DateTime(2018, 01, 02),
new DateTime(2018, 01, 03)
};
return View();
View:
<script language="javascript">
$(document).ready(function () {
var disableddates = [];
#foreach (DateTime date in ViewBag.DatesList)
{
//note JS month is zero-based for no good reason at all...
#:disableddates.push(new Date(#date.Year, #date.Month-1, #date.Day))
}
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
//filter array to find any elements which have the date in.
var filtereddates = disableddates.filter(function (d) {
return d.getTime() === date.getTime();
});
//return array with TRUE as the first (only) element if there are NO
//matching dates - so a matching date in the array will tell calling
//code to disable that day.
return [filtereddates.length == 0];
}
});
</script>
This appears to work for me.
My HTML code like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/
If I click submit button, I successfully get the datetime value 300 minutes from now
But if before submitting, I wait 10 minutes, the result does not match my expectations
For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it
How can I do that?
How do I make the automatic datetime value increase?
Update :
Whether the time value in textfield can be automatically increased based on current time?
Not sure why would you need it, but you can use something like:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
On click, it will change the datetimepicker to the current date + 300 minutes.
I've updated the example: https://jsfiddle.net/8jpmkcr5/86/
EDIT:
Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
You can test here: https://jsfiddle.net/8jpmkcr5/98/
You can update it every click and/or every minute
function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
$("#btnSubmit").click(function() {
updateTime();
value = document.getElementById('datetimepicker').value;
console.log(value)
});
setInterval(function(){
updateTime();
},60000);
check
https://jsfiddle.net/8jpmkcr5/88/
Anyway the idea of the picker is to let user choose, what's the point using it and forcing some date?
You can try a different approach and add the 300 minutes on submit like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
var d1 = new Date (),
d2 = new Date ( value );
d2.setMinutes ( d1.getMinutes() + 300 );
console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
var date = convertUTCDateToLocalDate(new Date(startdate));
date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
date = date.toLocaleString();
$('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
var offset = date.getTimezoneOffset() / 60;
var hours = date.getHours();
newDate.setHours(hours - offset);
return newDate;
}
I have a Javascript and html like below. All I want is to change the values bold areas with the "currMonth" and "currYear" variables' values, to make them dynamic. I appreciate for your help!.
<script type="text/javascript">
$(document).ready(function () {
var date = new Date();
var currMonth = date.getMonth();
var currYear= date.getFullYear();
currMonth +=1;
});
</script>
<html>
...
<table>
<td>...<td>
...
<td align="right" class="arrowIcon">
<img src="images/rightarrow.gif" border="0">
</td>
</table>
...
</html>
Thanks.
Edit: Thanks for the answers guys. All of them working!
You can update href in JavaScript:
$(document).ready(function () {
var date = new Date();
var currMonth = date.getMonth();
var currYear= date.getFullYear();
currMonth +=1;
$('table .arrowIcon>a').each(function(i, el) {
$(el).attr('href', 'index.php?m='+currMonth+'&y='+currYear+'&cat=0')
}
});
In plain javascript, use getElementById() to fetch the anchor node, and setAttribute() to change the link. Example given here. But as you are using jQuery, it's easier to use the .attr() function. Eg:
$('a').attr('href', 'index.php?m=' + currentMonth + '...');
you can get the href of the link and replace the ** ** placeholders with your variables like this:
var href= $('.arrowIcon).find('a').attr('href');
href = href.replace("**8**", currMonth);
href = href.replace("**2015**", currYear);
$('.arrowIcon').find('a').attr('href', href);
so, the other option to make it truly dynamic I would solve like this:
link html:
<img src="images/rightarrow.gif" border="0">
js:
$(document).ready(function () {
var date = new Date();
var currMonth = date.getMonth();
var currYear= date.getFullYear();
currMonth +=1;
var cat= $('.arrowIcon).find('a').data('cat');
$('.arrowIcon')
.find('a')
.attr('href',"index.php?m="+currMonth+"&y="+currYear+"&cat="+cat);
});
Here is a example that do not require jQuery if this is the only thing you are doing with javascript.
First of i moved the script tag to the buttom of the document to make sure that the html structure is created before the javascript is run. This is in general a good idea to not halt the rendering with javascript before the whole document is loaded, so placing the script tags in the bottom is best.
<html>
...
<table>
<td>...<td>
...
<td align="right" class="arrowIcon">
<img src="images/rightarrow.gif" border="0">
</td>
</table>
...
<script type="text/javascript">
var date = new Date();
var currMonth = date.getMonth();
var currYear= date.getFullYear();
currMonth +=1;
var atag = document.querySelector("table td a");
atag.href = 'index.php?m='+currMonth+'&y='+currYear+'&cat=0';
</script>
</html>