I have a page to edit the administrators of a post. I have some radio buttons in this page, each radio button corresponds to an administrator. When an administratotr is selected the details of that administrator appears on the form fields below the radio buttons.
One form field is a date. Im using cabon to show in this edit post administrators page the date in this format "format('d F Y - H:i')":
<div class="input-group date" data-provide="datepicker">
<input type='text' name="date" value="{{ $admin->date->format('d F Y - H:i') }}"
class="form-control" placeholder="DD/MM/YYY" />
<span class="input-group-addon"><i class="fa fa-calendar text-primary" aria-hidden="true"></i></span>
</div>
And it works fine. The date appears on this format: "07 February 2018 - 6:30".
But then I have some jQuery that receives an array with the administrators of the post from the controller and populate the details of each administrator in the form when the corresponding radio button is selected.
With this jQuery when this edit administrators page is acessed the date appears on this same format ""07 February 2018 - 6:30". But then if some amdinistrator is selected through the radio button the date field of that administrator appears with seconds: ""07 February 2018 - 6:30:00". But I dont want to show the seconds. I want this format ""07 February 2018 - 6:30".
Do you know how to do this?
jQuery:
$(document).ready(function () {
var admins= {!! $admin!!}
$("input[name='radiobutton']").click(function() {
let id = $(this).attr("id");
let data = admins.find(e => e.id == id) || {
name: "",
date: "",
};
//alert(data.date); // 2018-02-07 6:30:00
$("input[name='name']").val(data.name);
...
$("input[name='date']").val(data.date);
});
});
I don't know what went wrong along the line but from the Javascript end, moment can come to your rescue:
So, an example will be:
moment(data.date).format('DD MMMM YYYY h:mm')
PS: You have to include moment from cdn or install it via npm
Related
I have enabled/used the date picker from materializecss.com in my google script. I want to add a limit so that if a certain date is selected, for example, 10 times (e.g. 10 users selected the same date), it will disable the date selection.
I have placed the code for HTML for date picker which I got from materialize CSS. Then I also copy-paste the initialization indicated in the materialize CSS website under form then, picker and add some other codes.
for html:
<!-- DATE SELECTION -->
<div class="row">
<div class="input-field col s4">
<input id="subDate" type="text" class="datepicker" required>
<label for="subDate">Select Date</label>
</div> <!-- CLOSE TIME FIELD -->
</div>
for javascript:
document.addEventListener('DOMContentLoaded', function() {
//FOR DATE SELECTION
var dateSelect = document.getElementById('subDate');
// ----------- Setting Dates to Disable ------------
var disabledDays = [
new Date("2019, 11, 01").valueOf(),
new Date("2019, 7, 18").valueOf()
];
M.Datepicker.init(dateSelect, {
minDate: new Date ("2019, 5, 10"),
maxDate: new Date ("2019, 8, 21"),
format: 'mmmm dd, yyyy',
disableWeekends: true,
disableDayFn: function(day){
return disabledDays.indexOf(day.valueOf()) > -1;
}
});
});
For now, I can select or pick dates but I don't know how to code for the limit. Thank you in advance for the help. I'm a newbie when it comes to programming.
I have an input box where you should put your year of birth in. If the number is below 1998 you should gain access, if it's over 1998 you should go to another page.
I know this could possible be a mixture of javascript and html, but I can't figure out how to make the code and hoped you guys could help me!
This is the action that should happen, if the user is born in 1998 or before:
<div id="btn-close-modal" class="close-modal-03">
CLOSE MODAL
</div>
Hope you can help me :-)
I'm using jQuery.
Get the year from the input - $('input').val().
Get the current year - new Date().getFullYear().
Check if the diff between them is larger than 18.
Like this:
$('#age_validation_btn').click(function() {
var age = $('#age_validation_input').val();
if (new Date().getFullYear() - parseInt(age) >= 18) {
alert('older than 18');
}
else {
alert('younger then 18');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="age_validation_input" /><button id="age_validation_btn">Validate</button>
A better way is to use :::
db=new Date("original time string from input field with type date here");
db1=new Date();
var d= db1.getFullYear()-db.getFullYear();
if (d>limit) {alert("decide what to do you are not upto limit");}
Thank you in advance
Q.1
I would like to format the Angular-UI Bootstrap date and time pickers. Every time I change the time or date the output is in the following manner Today is: "2015-03-19T22:00:00.000Z". Obviously this is in correct. And my Node-Mysql is filled with this date formatting
What's more bizzar is that There is 1 day subtracted in the date, On the time it subtracts 2 hours. My Time zone is GMT+2 See MyBin.
When I click on the date again to change it I want the date to stay as 2015-03-20 and the time to 11:20
Q.2
How can I properly validate the following
<form name="BookingForm" ng-repeat="adult in myAdults">
<h4>Adults</h4>
<p>
<input required
ng-required="true"
name="adultName"
ng-model="adultItem.name"
type="text"
class="form-control"
ng-minlength = 3
placeholder="Name">
<div class="error" ng-show="BookingForm.adultName.$dirty && BookingForm.adultName.$invalid">
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.required">
Your name is required.
</small>
<small class="error btn-danger"
ng-show="BookingForm.adultName.$error.minlength">
Your name is required to be at least 3 characters
</small>
</div>
</p>
</form>
My js Looks like this
$scope.adults = 4;
$scope.children = 2;
$scope.myAdults = [];
for (i = 0; i < $scope.adults; i ++) {
$scope.myAdults.push({});
}
If I have just one form it works fine. But if I have more than one The validation messages only show up on the last one.
Most Important is Q1
Thank you again.
datepicker is using angularjs date filter and it's localised but returned values are in GMT so 2015-03-19T22:00:00.000Z is correct for 2015-03-12T00:00:00.000Z as it will subtract 2 hours from midnight back which changes date as well, if you need a specific format you can do it with date filter as per plunker so
{{'2015-03-19T22:00:00.000Z' | date:'dd-MMMM-yyyy'}} in your timezone shall return 20-March-2015
http://angular-ui.github.io/bootstrap/#/datepicker
http://plnkr.co/edit/CoIS2BFK5O5EAaTu4Vc2?p=preview
javascript
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
I would like to have a function that checks if a date in a field is more than 50 years in the past from todays date. If the date is more than 50 years in the past, a message should be shown, but there should not be any minimum date (maximum years).
I have a form where it is possible to add more fields dynamically (name + birthdate), and every new "form" should show this message under the birthday field if it is more than 50 years in the past.
The warning message under each birthdate field should be something like this (if over 50):
<div class="alert alert-warning">This person is over 50 year. Remember to do...</div>
My html setup:
<label for="id_nested-0-name">Name</label>
<input id="id_nested-0-name" maxlength="200" name="nested-0-name" type="text" />
<label for="id_nested-0-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-0-birthdate" name="nested-0-birthdate" type="date" />
<!-- If nested-0-birthdate is over 50, add html with warning message -->
<!-- New person -->
<label for="id_nested-1-name">Name</label>
<input id="id_nested-1-name" maxlength="200" name="nested-1-name" type="text" />
<label for="id_nested-1-birthdate">Birthdate</label>
<input class="dateinput" datadatepicker="datepicker" id="id_nested-1-birthdate" name="nested-1-birthdate" type="date" />
<!-- If nested-1-birthdate is over 50, add html with warning message -->
Edit:
This code works great in chrome, but does not work in safari. Anyone see what could be wrong?
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$("#collapse1 input.dateinput").on("change.dp change keyup paste click propertychange",function (e){
var timediff1 = moment().diff(moment($(this).val()), 'years');
if (timediff1 >= 50 ) {
$('#alert1').remove();
$('#collapse1 .panel-body').append('<div id="alert1">Over 50!</div>');
} else {
$('#alert1').remove();
}
});
});
});
</script>
Using http://eonasdan.github.io/bootstrap-datetimepicker/ for my date picker.
Edit 2:
I was missing data-format="DD/MM/YYYY" on my input. Now everything works!
If you dont mind using moment.js
JSFiddle with demo
boolean isOldGeezer = moment().diff(moment($(this).val()), 'years') > 50;
Three part answer to this question
First you need to get the date 50 years ago. I am using a small hack here. You can find better techniques in StackOverflow.
ago50y = new Date();
ago50y.setFullYear(ago50y.getUTCFullYear()-50);
Second, compare that date when the input changes. The following code uses jQuery.
$('input.dateinput').change(function (event) {
if ($(event.target).val() < ago50y.toJSON().slice(0,10)) {
$('#alert').text('This person is over 50 year. Remember to do...');
} else {
$('#alert').text('');
}
});
Third, invoke the second part whenever you add a new set of inputs. Put the above code in a function and include that in the callback while adding the new set.
http://jsfiddle.net/FA4hJ/
This is my Jquery Script Code.
<script type="text/javascript">
var months = ['01 - January', '02 - February', '03 - March', '04 - April', '05 - May', '06 - June', '07 - July', '08 - August', '09 - September', '10 - October', '11 - November', '12 - December'];
$().ready(function() {
$("#month").autocomplete(months,{minChars: 0,max: 12,autoFill: true,mustMatch: true,matchContains: false,scrollHeight: 220,
formatItem: function(data, i, total)
{
// don't show the current month in the list of values (for whatever reason)
if ( data[0] == months[new Date().getMonth()] )
return false;
return data[0];
}
});
$("#clear").click(function() {
$(":input").unautocomplete();
});
});
</script>
</head>
<body>
<div id="content">
<form autocomplete="off">
<p>
<label>Single Month:</label>
<input type="text" id="month" />
</p>
<input type="submit" value="Submit" />
</form>
</div>
</body>
Now I'm Entering a key '01' It Picks only '01 - January' in tat list . If i select the option by mouse clicking or Typing Enter key, the it will show in the text box. But i need to show only month code in the input filed. In list box only i should show the month code with the month description. I don't want to show the month description in the input box.
And another one I need to show arrow button to show the list. How can i do this ?
See this fiddle. I haven't added all the months. :) But the idea is to pass in an array with both pieces of data to the autocomplete widget. The autocomplete widget expects a data source in array format with either:
Objects containing a label property, a value property, or both
Simple string values
To add a 'drop down' arrow, see this sample from the jQuery docs. It is quite lengthy, but looks very good once you are done.