I have a date range picker on my page and it works all right except that once I pick the range the value doesn't update.
I'd say that this might be because once the date range is picked up it automatically does the search for the records, so I tried to update the value based on the
request.args.get("start_date") and request.args.get("last_date")
using js
document.getElementById('').value = '';
but it doesn't work.
Does anybody have any idea why I am not able to update the value?
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: true
}, function(start, end) {
window.location.search = 'start_date=' + start.format("DD/MM/YYYY") + "&last_date=" + end.format("DD/MM/YYYY");
document.getElementById('daterange').value = start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY");
});
});
</script>
<div class="col-md-12 center-block" style="padding-bottom: 2rem">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="daterange" name="daterange" value=""/>
</div>
</div>
Related
Here’s my front-end page:
Here is part of my code:
<div class="col-xs-4">
<div class="form-group">
<label class="col-sm-6 control-label" style="text-align: left"><#spring.message "bornDate"/>:</label>
<label class="col-sm-6 control-label" name="input-text" id="bornDate" style ="text-align: left"><input id="bornDateTmp" style="width:90px;" data-bind="value: model.bornDate"/></label>
<script>
$("#bornDateTmp").kendoDatePicker({
format: "{0:yyyy/MM/dd}"
}).data("kendoDatePicker");
</script>
</div>
</div>
...
...
<div class="col-xs-4">
<div class="form-group">
<label class="col-sm-6 control-label" style="text-align: left">
<#spring.message "age"/>:
</label>
<label class="col-sm-6 control-label" name="" id="age" style ="text-align: left">
<span id="ageTmp" data-bind="text:model.age">
<script>//here，here，here！！！
$("#ageTmp").text(basicInformation.model.age.getFullYear-new Date().getFullYear());
</script>
</span>
</label>
</div>
</div>
In addition, I would like to make a special note that the internal framework of the company is used for data binding:
<script type="text/javascript">
var basicInformation = kendo.observable({
model: {
},
});
$.ajaxSetup({async: false});
Hap.loadViewModel({
url: '${base.contextPath}/xxentry/people/info/collection/basicInfo',
model: basicInformation.model
});
$.ajaxSetup({async: true});
</script>
The problem is, when I choose my date of birth, the age doesn’t show up in real time, but on the chrome console, it works!I've been thinking about it all day.
Try to bind the change event on the date picker. On change calculate your age and bind it to the observable variable, bind that variable to your age element.
Something like this:
<input id="bornDateTmp" style="width:90px;" data-bind="value: model.bornDate, events: {change: onDateChange}"/>
var basicInformation = kendo.observable({
model: {
},
onDateChange: function(e) {
var selectedDate = this.model.bornDate;
var age = //calculate age;
this.model.set('age', age);
}
});
<span id="ageTmp" data-bind="text:model.age">
Working example: On change show value
I want to keep the value of a Date to a default value that I specified. If no date is selected when user click submit button.
what I need the functionality to be. If user select a date and submit the form, after submission the form selected date value must be the value on the date field which works perfectly so. I have the problem ie. when date is not selected and user submit form the date field have the today's date by default Select Date
My code is as follows
HTML
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" value="${newDate}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
Js code
function CovertDateToString() {
var date = <%=request.getParameter("selectDateRange")%>;
var myDate = new Date();
var selectDate = myDate.toDateString();
var selectDate = "Select Date";
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementsById('selectDateRange')[0].value = date;
console.log("Set Date to Select Date ",selectDate);
console.log("Set Date to Selected Date ",date);
}
daterangepicker
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
function CovertDateToString() {
var date = "${newDate}";
var myDate = new Date();
var selectDate = myDate.toDateString();
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementById('selectDateRange').value = date;
console.log("Set Date to Select Date ",selectedDate);
console.log("Set Date to Selected Date ",date);
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
After more hours on this issue I final got it to work. Removing the request.getParamter was the mean reason date got removed after
Please check the following code i have used static values at the place of dynamic values so manage it and code is working fine at snnipet.
function CovertDateToString() {
var date = "${newDate}";
var arr = date.split(" ");
if(arr != "null"){
$("#selectDateRange").data('daterangepicker').setStartDate(arr[0]);
$("#selectDateRange").data('daterangepicker').setEndDate(arr[2]);
}
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
<script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet"/>
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
I am using jQuery Spinner and dont know how to get value from spinner to use in javascript code.
JS - in separate library i need to call value
function calculate (){
var result = 15 * HERE I NEED VALUE! ;
}
<div class="input-group spinner" data-trigger="spinner">
<input type="text" class="form-control text-center" value="0" data-rule="quantity">
<div class="input-group-addon">
<i class="fa fa-caret-up"></i>
<i class="fa fa-caret-down"></i>
</div>
</div>
Something like this
$("#spinner")
.spinner('delay', 200) //delay in ms
.spinner('changed', function(e, newVal, oldVal) {
// trigger lazed, depend on delay option.
})
.spinner('changing', function(e, newVal, oldVal) {
// trigger immediately
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vsn4ik/jquery.spinner/master/dist/js/jquery.spinner.min.js"></script>
<div data-trigger="spinner" id="spinner">
-
<input type="text" value="1" data-rule="quantity">
+
</div>
I wanted to write a code that would allow me to create the inputs such as subject, date of purchase and asset value, the input box has the attribute 'class = "datepicker"' and at first everything works properly read, but when I call the works to append to add other input (same as above) within the pages, "datepicker" no longer gives any sign of life.
I show you the code:
<div class="well bs-component" ><fieldset><div id="elencoBeni">
<div class="input-group">
<span class="input-group-addon">Oggetto</span>
<g:textField class="form-control" placeholder="Oggetto" name="oggetto" id="oggetto" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span>
<g:textField class="form-control datepicker" placeholder="Data acquisto" name="dataAcquisto" id="dataAcquisto" />
<span class="input-group-addon">Valore</span>
<g:textField class="form-control" placeholder="Valore" name="valoreBene" id="valoreBene"/><br/>
</div><br/>
</div>
<label class="btn btn-success" id="aggiungiOggetto" name="aggiungiOggetto" >+</label>
</fieldset></div>
jquery Function:
<g:javascript>
$(document).ready(function(){
$('.datepicker').datepicker({
language: 'it'
}); var i = 0;
$("#aggiungiOggetto").click(function(){
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto'+i+'" id="oggetto'+i+'"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto'+i+'" id="dataAcquisto'+i+'"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene'+i+'" id="valoreBene'+i+'"/><br/></div><br/>');
i++
}); </g:javascript>
Since the input is dynamically added to dom, you need to initialize datepicker for the element after added to dom.
$(document).ready(function() {
$('.datepicker').datepicker({
language: 'it'
});
var i = 0;
$("#aggiungiOggetto").click(function() {
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto' + i + '" id="oggetto' + i + '"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto' + i + '" id="dataAcquisto' + i + '"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene' + i + '" id="valoreBene' + i + '"/><br/></div><br/>');
// initialize datepicker again, which includes the dynamically added element
$('.datepicker').datepicker({
language: 'it'
});
i++
});
});
Because new elements don't have .datepicker() binded.
instead of:
$('.datepicker').datepicker({
language: 'it'
});
use:
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
language: 'it'
});
});
I need a group of form fields to dynamically be added if a user does not enter the minimum required value.
So I need 3 years living history for a residential address. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered.
The html looks like this
<!-- Current address-->
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label">Current Home Address</label>
<div class="col-sm-2">We need 3 years living history. Keep adding previous home addresses until you reach a minimum of 3 years history.</div>
<div class="col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton1"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The hidden Current address template containing the Current address fields and a Remove button, this gets added when a user clicks "add" on the form group above -->
<div class="form-group hide" id="homeTemplate">
<div class="row">
<label class="col-md-4 control-label">Previous Address</label>
<div class=" col-SM-offset-2 col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
The javascript which currently handles dynamically adding and removing the form group manually looks like this
$(document).ready(function() {
// The maximum number of options
var MAX_OPTIONS = 20;
$('#custom')
.formValidation()
// Add button click handler
.on('click', '.addButton1', function() {
var $template = $('#homeTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$about_st = $clone.find('[name="about_you_address-st[]"]')
$about_sub = $clone.find('[name="about_you_address-sub[]"]')
$about_city = $clone.find('[name="about_you_address-city[]"]')
$about_state = $clone.find('[name="about_you_address-state[]"]')
$about_post = $clone.find('[name="about_you_address-post[]"]')
$about_dur = $clone.find('[name="about_you_address-duration[]"]');
// Add new field
$('#custom')
.formValidation('addField', $about_st)
.formValidation('addField', $about_sub)
.formValidation('addField', $about_city)
.formValidation('addField', $about_state)
.formValidation('addField', $about_post)
.formValidation('addField', $about_dur);
})
// Remove button click handler
.on('click', '.removeButton1', function() {
var $row = $(this).parents('.form-group'),
$about_st = $row.find('[name="about_you_address-st[]"]')
$about_sub = $row.find('[name="about_you_address-sub[]"]')
$about_city = $row.find('[name="about_you_address-city[]"]')
$about_state = $row.find('[name="about_you_address-state[]"]')
$about_post = $row.find('[name="about_you_address-post[]"]')
$about_dur = $row.find('[name="about_you_address-duration[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#custom')
.formValidation('removeField', $about_st)
.formValidation('removeField', $about_sub)
.formValidation('removeField', $about_city)
.formValidation('removeField', $about_state)
.formValidation('removeField', $about_post)
.formValidation('removeField', $about_dur);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length >= MAX_OPTIONS) {
$('#custom').find('.addButton1').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length < MAX_OPTIONS) {
$('#custom').find('.addButton1').removeAttr('disabled');
}
}
});
});
Thank you so much.
For starters you have id's with [] in them eg 'about_you_address-duration[]'. You can't do that. It's not unique
Add some javascript
function checkTimeTotal()
{
// Calculate total times
totalDays = 0;
lastDate = new Date.now();
$('[name="about_you_address-duration[]"]').each(function() {
// get days between now and last date
thisDate = $(this).val(); // Turn this into a date
totalDays += (difference between 2 dates);
lastDate = thisDate;
});
if (totalDays < (3 * 365)) {
// Add more options using your other code
}
}
// Need to call this again when you add the new form elements in the above code
$('[name="about_you_address-duration[]"]').off('change').on('change', checkTimeTotal());
Get difference between 2 dates in javascript? - this will get the days between 2 dates