How to get Date and Time Picker values from textbox? - javascript

I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this

You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual

Related

How to make dateTime picker as required field in moment & AngularJs

I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach that I am following is not working.
Here is my code -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
I want submit button to remain disabled until I don't select values for all the required fields.

How can I set age with DatePicker?

I am trying to display age on the text field when I change the date picker. When I choose a date the value doesn't show up on the age text field. How can I display the age when I pick a date? Is there a better way of doing this?
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})
You have a couple of issues. Firstly, the element has no birthDate class, it's an id. As such the selector needs to be #birthDate, not .birthDate.
Secondly, the format of the date will depend on the user's locale. For example, mine displays in YYYY-MM-DD format. As such your explicit instruction to momentJS to parse the date in DD/MM/YYYY format caused it to be read incorrectly. You're better off not specifying the format and letting momentJS determine for itself.
With those issues addressed, try this:
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

bootstrap-datepicker double addon and stopPropagation

I use bootstrap-datepicker and want to have a second addon with a checkbox.
I don't want trigger the show of datepicker when i click in the checkbox addon.
I tested the stopPropagation, return false on the onclick event of the second addon but it doesn't work :(
<div class="container">
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<span class="input-group-addon test"><input type="checkbox"/></span>
</div>
</div>
</div>
with this javascript :
$(document).ready(function() {
$('#ARDT').datepicker();
$('.date .test').click(function(e){
e.stopPropagation();
});
});
you can view live on this jsfiddle : http://jsfiddle.net/5a5xzz10/4/
Can you help me ?
Thanks
Whiletrue
EDIT : Found a solution :
<div class ="form-group">
<label class="control-label" >Received Date OK</label>
<div class="input-group">
<div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<span class="input-group-addon"><input type="checkbox"/></span>
</div>
</div>
embbed the input-group for the datepicker inside another and put the second input-group-addon just after
like here : http://jsfiddle.net/5a5xzz10/6
I have an answer but it doesn't seems very elegant.
I added the checkbox after started the datepicker generation.
$(document).ready(function() {
$('#ARDT').datepicker();
$("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>'));
});

Alloy-ui multiple datepicker send selection to other input

I have AlloyUi datepicker that is triggered by div id="trigger", but I want to display the dates selected in the hidden input id="dates".
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker(
{
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
on: {
dateClick: function(event) {
output.set('value', Y.Date.format(event.date,{format:multidatepicker.get('mask')}));
}
}
},
popover: {
zIndex: 10
},
panes: 2
})
});
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
I found a solution here, but it only passes a single date to the input. I need to pass a date range selected by the user.
Any ideas?
You can copy the #startdate value attribute into the #dates value attribute after the date is clicked:
after: {
dateClick: function(event) {
output.set('value',
Y.one(multidatepicker.get('trigger')).get('value'));
}
}
Here's a runnable example with your code:
YUI().use('aui-datepicker', function(Y) {
var output = Y.one('#dates');
var multidatepicker = new Y.DatePicker({
mask: '%Y-%m-%d',
trigger: '#startdate',
calendar: {
selectionMode: 'multiple',
after: {
dateClick: function(event) {
output.set('value', Y.one(multidatepicker.get('trigger')).get('value'));
}
}
},
popover: {
zIndex: 1000
},
panes: 2
})
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="trigger">
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">Start Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="startdate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<input id="dates" class="form-control" style="display:hidden"></input>
<div class='col-md-4'>
<div class="form-group">
<label class="control-label" for="email">End Date</label>
<div class='input-group date' id=''>
<input type='text' data-format="dd/MM/yyyy" id="enddate" class="form-control multidate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>

Date Format(YYYY-MM-DD) in DatePicker and Date field

I have a date field in my application. By clicking it, a calendar appears. So after selecting a date, the date field must be shown as 'YYYY-MM-DD' but it shows as 'MM-DD-YYYY'.
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="startdate" name="startdate" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="enddate" name="enddate" type="date">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datepicker({dateFormat: "yyyy-mm-dd"});
});
</script>
Change the yyyy to yy. Here you have the doc http://api.jqueryui.com/datepicker/#utility-formatDate
In my experience format of the date depends on language which set for browser.
In browser js console you can see it with
navigator.languages
Hope it helps.

Categories

Resources