clockpicker in js showing the wrong time - javascript

The default value is given like this type="text" class="form-control" value="10:30AM" but it shows only 10:00 in clock.
here is the code:
this.form = $('<form><div class="row-form status-row-oth border-bottom-none"><div class="col-sm-2 day-month">'+ this.date+'</div><div class="col-sm-2 selectpicker-oth activity-list"><select id="activity_dd_'+this.row_id+'"></select></div><div class="col-sm-3"><input type="text" class="form-control" id="memo_'+this.row_id+'" name="memo" placeholder="Enter memo..."></div><div class="col-sm-3 start-time-oth"><div class="start-time"><label>Start Time</label><div class="input-group clockpicker"><input name="start_time" id="start_time_'+this.row_id+'" type="text" class="form-control" value="10:30AM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div><div class="start-time"><label>End Time</label><div class="input-group clockpicker"><input name="end_time" id="end_time_'+this.row_id+'" type="text" class="form-control" value="06:30PM"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-sm-2 save-memo-btn save-btn" id="'+this.save_btn_id+'"> Save Memo</div></div></form>');
Anybody know the solution then please let me know. thanks

<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" />
</head>
<body>
<!-- Or just a input -->
<input type="text" id="demo-input" class="form-control" value="10:30" />
<!-- jQuery and Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js"></script>
<script type="text/javascript">
$('#demo-input').clockpicker({
'default': DisplayTimeWithAMPM(),
donetext: 'Done',
twelvehour: true,
autoclose: false,
leadingZeroHours: false,
upperCaseAmPm: true,
leadingSpaceAmPm: true,
afterHourSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
},
afterMinuteSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
},
afterAmPmSelect: function() {
$('.clockpicker').clockpicker('realtimeDone');
}
});
function DisplayTimeWithAMPM() {
debugger;
time = $('#demo-input').val() + "AM";
debugger;
return time;
};
</script>
</body>
</html>
set
twelvehour: true
So that you can get AM and PM box in your timepicker.
Hope this will works for you! thank you

Related

Unable to use firebase.auth from my js file

Problem
: getting an error when I try to use firebase.auth to create a new user.
Error
Uncaught TypeError: firebase.auth.createUserWithEmailAndPassword is not a function
What should happen : In my html there is a form for user sign up with email and password. On button click my script takes the input from the sign up form and passes it to firebase.auth however firebase.auth seems to not be available from an external script that is being included into the html file. The html file does have the firebase includes and I can deploy my code into firebase hosting, I already went through the firebase localhost installation process from the firebase docs.
Here is my HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sign Up</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800,900" rel="stylesheet">
<link href="dist-assets/css/themes/lite-purple.min.css" rel="stylesheet">
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.12.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.12.0/firebase-auth.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-database.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.12.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800,900" rel="stylesheet">
<link href="dist-assets/css/themes/lite-purple.min.css" rel="stylesheet">
</head>
<div class="auth-layout-wrap" style="background-image: url(dist-assets/images/photo-wide-4.jpg)">
<div class="auth-content">
<div class="card o-hidden">
<div class="row">
<div class="col-md-6 text-center" style="background-size: cover;background-image: url(dist-assets/images/photo-long-3.jpg)">
<div class="pl-3 auth-right">
<div class="auth-logo text-center mt-4"><img src="dist-assets/images/car.png" alt=""></div>
<div class="flex-grow-1"></div>
<div class="w-100 mb-4"><a class="btn btn-outline-primary btn-block btn-icon-text btn-rounded" href="/"><i class="i-Mail-with-At-Sign"></i> Sign in with Email</a><a class="btn btn-outline-google btn-block btn-icon-text btn-rounded"><i class="i-Google-Plus"></i> Sign in with Google</a><a class="btn btn-outline-facebook btn-block btn-icon-text btn-rounded"><i class="i-Facebook-2"></i> Sign in with Facebook</a></div>
<div class="flex-grow-1"></div>
</div>
</div>
<div class="col-md-6">
<div class="p-4">
<h1 class="mb-3 text-18">Sign Up</h1>
<form action="">
<div class="form-group">
<label for="username">Your name</label>
<input class="form-control form-control-rounded" id="username" type="text">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input class="form-control form-control-rounded" id="email" type="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control form-control-rounded" id="password" type="password">
</div>
<div class="form-group">
<label for="repassword">Retype password</label>
<input class="form-control form-control-rounded" id="repassword" type="password">
</div>
<button onclick="signUpWithEmail(event)" class="btn btn-primary btn-block btn-rounded mt-3">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
const auth = firebase.auth();
console.log(features);
} catch (e) {
console.error(e);
}
});
</script>
<script src="dist-assets/js/app-js/app-dist.js"></script>
And Here is my js
//Sign up with email and password
function signUpWithEmail(e){
e.preventDefault();
var name = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var passwordMatch = document.getElementById("repassword").value;
//Create user
auth.createUserWithEmailAndPassword(email, password).then(cred => {
console.log(cred);
})
//Get UID
//Create New Collection identified by UID
//Create user info document
//Add user email and name to user info document
}
I was calling firebase.auth.createUserWithEmailAndPassword()
It should have been firebase.auth().createUserWithEmailAndPassword() which I did do right on my sign in method using auth()..
Yep Im kicking myself right now

Enable To Date Only after filling the From Date [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am using bootstrap datepicker and I want to know is there a way to enable To Date Only after filling the From Date.Before that it will be disable. Both javascript or jQuery solutions are welcome.
my html
<div id="div2" style="display: none">
<div class="row m-t-5">
<div class="col-md-8">From Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
</div>
<div class="row m-t-5">
<div class="col-md-8">To Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
</div>
</div>
<script>
my javascript code
function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1 = document.getElementById('leave_from').value;
var date = date1.substring(0, 2);
var month = date1.substring(3, 5);
var year = date1.substring(6, 10);
var FROM = new Date(year, month - 1, date);
var date2 = document.getElementById('leave_to').value;
var date1 = date2.substring(0, 2);
var month1 = date2.substring(3, 5);
var year1 = date2.substring(6, 10);
var TO = new Date(year1, month1 - 1, date1);
if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
}
}
Try with,
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("changeDate", function (e) {
$('#datepicker2').prop('disabled',false);
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
Hoe this will help you!! :)
Check this version of the code. Make sure that the first date must be set before heading to the second one. If someone is setting the first date, then the second and then delete the first, the second will also be cleared and disabled again.
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("change", function (e) {
if($('#datepicker1').val() == ""){
$('#datepicker2').prop('disabled',true);
}else{
$('#datepicker2').val('');
$('#datepicker2').prop('disabled',false);
}
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>

i am not able to bind the date-picker with ng-model

I am trying to save the value of selected date to db. But the ng-modal is not reflecting the selected date from the datepicker. Also none of the validation is working in this.
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.valid = false;
var today=new Date();
$scope.today = today.toISOString();
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
addFlood =function(){
alert(JSON.stringify(addFlood));
}
});
//here is the html file for the datepicker
<!-- here is my html file -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<style type="text/css">
.errortext {
color: red;
}
</style>
</head>
<body ng-controller="myController">
<div class="container-fluid">
<div class="row col-md-6 col-sm-6 col-xs-12">
<div class=" form-body">
<form role="form" name="myForm" novalidate>
<div class="form-group">
<label class="control-label "> Gate Open Date - Today:-> {{today | date:'yyyy-MM-dd'}} </label>
<div class="input-group date" date-picker>
<!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="date"/>-->
<input type="text" id="date" name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" [(ngModel)]="$parent.addFlood.gateOpenDate" min="{{today | date:'yyyy-MM-dd'}}" required autofocus date-picker-input/>
<div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
<span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
<span ng-show="myForm.gateOpenDate.$error.date">Date Format Must Be MM-DD-YYYY</span>
<span ng-show="myForm.gateOpenDate.$error.min">Gate open Date should not be less than current date</span>
</div>
<div class="input-group-addon">
<i class="fa fa-calendar"> </i>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
ngModel :{{addFlood.gateOpenDate}}
<script src="angular.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="gateOpenDate"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date(),
})
})
function read() {
var value = element.find('input').val();
ngModel.$setViewValue(value);
}
</script>
</body>
</html>
ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

How to calculate two asp text box values using JavaScript and save it on database?

I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

AngularJS $resource writeFileSync giving Error: ENOENT: no such file or directory, open

I have been doing a tutorial on AngularJS and am stuck on trying to fill this form and have it saved to disk as a json file using the $resource service.
I keep getting the error
Error: ENOENT: no such file or directory, open '/data/event/999.json'
app/NewEvent.html
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="container">
<div class="navbar-inner">
<ul class="nav">
<li>Create Event</li>
</ul>
</div>
<style> input.ng-invalid.ng-dirty {background-color:pink}</style>
<div ng-controller="EditEventController" style="padding-left:20px; padding-right:20px">
<div class="container">
<h1>New Event</h1>
<hr>
<form name="newEventForm">
<fieldset>
<label for="eventName">Event Name:</label>
<input id="eventName" type="text" required ng-model="event.name" placeholder="Name of your event ...">
<label for="eventDate"> Event Date</label>
<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model="event.date" placeholder="format (mm/dd/yyyy)...">
<label for="eventTime">Event Time:</label>
<input id="eventTime" type="text" ng-model="event.time" placeholder="start and end time ...">
<label for="eventLocation"> Event Location</label>
<input id="eventLocation" type="text" ng-model="event.location.address" placeholder="Address of event...">
<br>
<input id="eventCity" type=text" ng-model="event.location.city" class="input-small" placeholder="City...">
<input id="eventProvince" type="text" ng-model="event.location.province" class="input-small" placeholder="Province...">
<label for="eventImageUrl">Image:</label>
<input id="eventImageUrl" type="url" ng-model="event.imageUrl" class="input-xlarge" placeholder="Url of image...">
</fieldset>
<img ng-src="{{event.imageUrl}}" src="">
<br>
<br>
<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
<button type="button" ng-click="cancelEdit()" class="btn btn-default">Cancel</button>
</form>
</div>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/underscore-1.4.4.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular/angular-resource.js"></script>
<script src="/lib/angular/angular-sanitize.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/EventController.js"></script>
<script src="/js/controllers/EditEventController.js"></script>
<script src="/js/services/EventData.js"></script>
<script src="/js/filters.js"></script>
</body>
</html>
app/js/controllers/EditEventController.js
eventsApp.controller('EditEventController',function EditEventController($scope,eventData) {
$scope.saveEvent = function (event, newEventForm) {
if(newEventForm.$valid){
eventData.save(event)
.$promise.then(
function (response) { console.log('success',response)},
function (response) { console.log('failure',response)}
)
}
}
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
}
})
app/js/services/EventData.js
eventsApp.factory('eventData', function ($resource) {
return {
getEvent: function() {
return $resource('/data/event/:id.json',{id:'#id'}).get({id:1});
},
save: function (event) {
event.id = 999;
return $resource('/data/event/:id',{id:'#id'}).save(event);
}
}
})
scripts/eventsController.js
var fs = require('fs')
module.exports.get = function (req,res) {
var event = fs.readFileSync('/data/event/' + req.params.id ,'utf8');
res.setHeader('Content-Type','application/json');
res.send(event)
}
module.exports.save = function (req,res) {
var event = req.body;
fs.writeFileSync('/data/event/' + req.params.id +'.json', JSON.stringify(event));
res.send(event)
}
scripts and app are on the same level
EventDetails.html is inside app and in the same level as NewEvent.html
At first glance the code looks correct, could this maybe be a permission problem?

Categories