Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 20, 2017 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/91ffbe2112e49361e2d75988dd3dda07 to your computer and use it in GitHub Desktop.
Save anonymous/91ffbe2112e49361e2d75988dd3dda07 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/masunigayu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<title>JS Bin</title>
<style>
.detail_table td,.total_table td{padding:8px;}
.u-item{
margin:10px;
padding:5px;
border:1px solid green;
display: inline-block
}
.u-item:hover{cursor:pointer}
#app{width:600px;}
</style>
</head>
<body>
<div id="app">
<h2>記帳本</h2>
<div style="padding:5px;border:1px solid gray;">
常用項目<br>
<input type="radio" id="one" value="收入" v-model="add_detail.type">
<label>收入</label>
<input type="radio" id="two" value="支出" v-model="add_detail.type">
<label>支出</label>
<br>
<u-item
v-for="item,index in usually_item"
v-if="item.type==add_detail.type"
v-bind:u_item="item"
v-on:add_add_detail="set_add_detail(item.name)"
v-on:delete_add_detail="delete_uitem(index)">
</u-item>
</div>
<br>
<table>
<tr>
<td>項目名稱</td>
<td>類型</td>
<td>金額</td>
<td>操作選項</td>
<tr>
<td>
<input type="text" v-model="add_detail.name">
</td>
<td>
<select v-model="add_detail.type">
<option>收入</option>
<option>支出</option>
</select>
</td>
<td>
<input type="number" v-model="add_detail.money" v-on:keypress="isNumber(event)" style="width: 80px">
</td>
<td>
<input type="text" id="datepicker" v-model="add_detail.date" size="10">
</td>
<td>
<input type="button" v-on:click="add" value="新增到明細"><br>
<input type="button" v-on:click="add_uitem" value="新增到常用項目">
</td>
</table>
<br><hr><br>
最近期間:
<select v-model="recent_day" v-on:change="set_filter_date">
<option value="7">最近7天</option>
<option value="30">最近1個月</option>
<option value="90">最近3個月</option>
</select>
<br>
設定過濾日期: <label for="from">從</label>
<input type="text" id="from" name="from" v-model="filter_date.start" size="8">
<label for="to">到</label>
<input type="text" id="to" name="to" v-model="filter_date.end" size="8">
<input type="button" v-on:click="clear_date" value="清除">
<br>
<h3>統計</h3>
<table class="total_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr>
<td>支出項目</td>
<td>金額</td>
<td>百分比</td>
</tr>
<tr v-for="detail in total_spend">
<td>{{detail.name}}</td>
<td>{{detail.money}}</td>
<td>{{detail.percent}}</td>
</tr>
<tr>
<td colspan=3>總支出{{ts}}</td>
</tr>
</table>
<br>
<table class="total_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr>
<td>收入項目</td>
<td>金額</td>
<td>百分比</td>
</tr>
<tr v-for="detail in total_income">
<td>{{detail.name}}</td>
<td>{{detail.money}}</td>
<td>{{detail.percent}}</td>
</tr>
<tr>
<td colspan=3>總收入{{ti}}</td>
</tr>
</table>
<h3>明細</h3>
<table class="detail_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr v-for="detail,index in details"
v-if="check_date(filter_date.start,detail.date,filter_date.end)">
<td>{{ index }}</td>
<td>{{ detail.name }}</td>
<td>{{ detail.type }}</td>
<td>{{ detail.money }}</td>
<td>{{ detail.date }}</td>
<td>
<input type="button" v-on:click="delete_detail(index)" value="X">
</td>
</tr>
</table>
<h3>總額:{{total}}</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script id="jsbin-javascript">
var filter_details=[];
Vue.component('u-item', {
props:['u_item'],
template: '<div v-on:click="add_add_detail()" class="u-item">{{u_item.name}} <input type="button" v-on:click="delete_add_detail()" value="x"></div>',
methods:{
add_add_detail:function(){
this.$emit('add_add_detail')
},
delete_add_detail:function(){
this.$emit('delete_add_detail')
}
}
})
var app = new Vue({
el: '#app',
data: {
usually_item:[
{name:'工作',type:'收入'},
{name:'吃飯',type:'支出'},
{name:'買生活用品',type:'支出'}
],
details: [
{ name: '買養樂多',type:'支出',money:10,date:"2017/09/10" },
{ name: '買原子筆',type:'支出',money:40,date:"2017/09/13" },
{ name: '買筆記本',type:'支出',money:100,date:"2017/09/15" },
{ name: '工作',type:'收入',money:150,date:"2017/09/15" },
{ name: '吃烏馬',type:'支出',money:1000,date:"2017/09/25" }
],
total_spend:[],
total_income:[],
ts:0,
ti:0,
add_detail:{name: '',type:'收入',money:'',date:''},
filter_date:{start:'',end:''},
recent_day:7,
total:0
},
created:function(){
this.set_filter_date();
},
methods: {
add_uitem:function(){
this.usually_item.push({
name:this.add_detail.name,
type:this.add_detail.type
})
},
delete_uitem:function(index){
this.usually_item.splice(index, 1)
},
add: function () {
this.details.push({
name:this.add_detail.name,
type:this.add_detail.type,
money:this.add_detail.money,
date:this.add_detail.date
})
this.compute_total_detail();
},
set_add_detail:function(detail_name){
this.add_detail.name = detail_name;
this.add_detail.money = "";
},
delete_detail:function(index){
this.details.splice(index, 1)
this.compute_total_detail();
},
isNumber: function(evt) {//只能輸入數字
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
},
check_date:function(start_date,item_date,to_date){
if(start_date==="" || to_date==="")return true;
var sd = new Date(start_date).getTime();
var id = new Date(item_date).getTime();
var td = new Date(to_date).getTime();
if(sd <= id && td>=id)
return true;
},
set_filter_date:function(){
var today = new Date();
var day = new Date();
day.setDate(day.getDate() - this.recent_day);
var today_formate = this.date_formate(today);
var day_formate = this.date_formate(day);
this.filter_date.start = day_formate;
this.filter_date.end = today_formate;
this.compute_total_detail();
},
date_formate:function(date){
dd = date.getDate();
mm = date.getMonth() + 1;
y = date.getFullYear();
return y + '/' + mm + '/'+ dd;
},
clear_date:function(){
this.filter_date.start="";
this.filter_date.end="";
from.datepicker();
to.datepicker();
},
add_spend_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_spend){
if(this.total_spend[j].name == name){
check = false;
var money = detail.money;
this.total_spend[j].money += money;
}
}
if(check)this.total_spend.push({name:name,type:"支出",money:detail.money})
},
add_income_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_income){
if(this.total_income[j].name == name){
check = false;
var money = detail.money;
this.total_income[j].money += money;
}
}
if(check)this.total_income.push({name:name,type:"收入",money:detail.money})
},
compute_total_detail:function(){
this.total_income=[];
this.total_spend=[];
this.ts=0;
this.ti=0;
this.total=0;
var name="";
var check=true;
for(var i in this.details){
if(this.check_date(this.filter_date.start,this.details[i].date,this.filter_date.end)){
if(this.details[i].type=="收入"){
this.total += parseInt(this.details[i].money)
this.ti += parseInt(this.details[i].money)
this.add_income_array(this.details[i]);
}else{
this.add_spend_array(this.details[i]);
this.total -= parseInt(this.details[i].money)
this.ts += parseInt(this.details[i].money)
}
}
}
//計算百分比
var percent=0;
for(i in this.total_spend){
percent = ((this.total_spend[i].money / this.ts) * 100).toFixed(2)
this.total_spend[i].percent = percent;
}
for(i in this.total_income){
percent = ((this.total_income[i].money / this.ti)* 100).toFixed(2)
this.total_income[i].percent = percent;
}
}
}
})
$( function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd' });
var dateFormat = "yy/mm/dd",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
$(document).ready(function () {
$("#from").datepicker().on("change", function (e) {
app.$data.filter_date.start = $(this).val();
app.compute_total_detail();
});
$("#to").datepicker().on("change", function (e) {
app.$data.filter_date.end = $(this).val();
app.compute_total_detail();
});
$("#datepicker").datepicker().on("change", function (e) {
app.$data.add_detail.date = $(this).val();
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<title>JS Bin</title>
<style>
.detail_table td,.total_table td{padding:8px;}
.u-item{
margin:10px;
padding:5px;
border:1px solid green;
display: inline-block
}
.u-item:hover{cursor:pointer}
#app{width:600px;}
</style>
</head>
<body>
<div id="app">
<h2>記帳本</h2>
<div style="padding:5px;border:1px solid gray;">
常用項目<br>
<input type="radio" id="one" value="收入" v-model="add_detail.type">
<label>收入</label>
<input type="radio" id="two" value="支出" v-model="add_detail.type">
<label>支出</label>
<br>
<u-item
v-for="item,index in usually_item"
v-if="item.type==add_detail.type"
v-bind:u_item="item"
v-on:add_add_detail="set_add_detail(item.name)"
v-on:delete_add_detail="delete_uitem(index)">
</u-item>
</div>
<br>
<table>
<tr>
<td>項目名稱</td>
<td>類型</td>
<td>金額</td>
<td>操作選項</td>
<tr>
<td>
<input type="text" v-model="add_detail.name">
</td>
<td>
<select v-model="add_detail.type">
<option>收入</option>
<option>支出</option>
</select>
</td>
<td>
<input type="number" v-model="add_detail.money" v-on:keypress="isNumber(event)" style="width: 80px">
</td>
<td>
<input type="text" id="datepicker" v-model="add_detail.date" size="10">
</td>
<td>
<input type="button" v-on:click="add" value="新增到明細"><br>
<input type="button" v-on:click="add_uitem" value="新增到常用項目">
</td>
</table>
<br><hr><br>
最近期間:
<select v-model="recent_day" v-on:change="set_filter_date">
<option value="7">最近7天</option>
<option value="30">最近1個月</option>
<option value="90">最近3個月</option>
</select>
<br>
設定過濾日期: <label for="from">從</label>
<input type="text" id="from" name="from" v-model="filter_date.start" size="8">
<label for="to">到</label>
<input type="text" id="to" name="to" v-model="filter_date.end" size="8">
<input type="button" v-on:click="clear_date" value="清除">
<br>
<h3>統計</h3>
<table class="total_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr>
<td>支出項目</td>
<td>金額</td>
<td>百分比</td>
</tr>
<tr v-for="detail in total_spend">
<td>{{detail.name}}</td>
<td>{{detail.money}}</td>
<td>{{detail.percent}}</td>
</tr>
<tr>
<td colspan=3>總支出{{ts}}</td>
</tr>
</table>
<br>
<table class="total_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr>
<td>收入項目</td>
<td>金額</td>
<td>百分比</td>
</tr>
<tr v-for="detail in total_income">
<td>{{detail.name}}</td>
<td>{{detail.money}}</td>
<td>{{detail.percent}}</td>
</tr>
<tr>
<td colspan=3>總收入{{ti}}</td>
</tr>
</table>
<h3>明細</h3>
<table class="detail_table" border=1 width="100%" cellspacing="0" style="text-align:center">
<tr v-for="detail,index in details"
v-if="check_date(filter_date.start,detail.date,filter_date.end)">
<td>{{ index }}</td>
<td>{{ detail.name }}</td>
<td>{{ detail.type }}</td>
<td>{{ detail.money }}</td>
<td>{{ detail.date }}</td>
<td>
<input type="button" v-on:click="delete_detail(index)" value="X">
</td>
</tr>
</table>
<h3>總額:{{total}}</h3>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"><\/script>
<script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var filter_details=[];
Vue.component('u-item', {
props:['u_item'],
template: '<div v-on:click="add_add_detail()" class="u-item">{{u_item.name}} <input type="button" v-on:click="delete_add_detail()" value="x"></div>',
methods:{
add_add_detail:function(){
this.$emit('add_add_detail')
},
delete_add_detail:function(){
this.$emit('delete_add_detail')
}
}
})
var app = new Vue({
el: '#app',
data: {
usually_item:[
{name:'工作',type:'收入'},
{name:'吃飯',type:'支出'},
{name:'買生活用品',type:'支出'}
],
details: [
{ name: '買養樂多',type:'支出',money:10,date:"2017/09/10" },
{ name: '買原子筆',type:'支出',money:40,date:"2017/09/13" },
{ name: '買筆記本',type:'支出',money:100,date:"2017/09/15" },
{ name: '工作',type:'收入',money:150,date:"2017/09/15" },
{ name: '吃烏馬',type:'支出',money:1000,date:"2017/09/25" }
],
total_spend:[],
total_income:[],
ts:0,
ti:0,
add_detail:{name: '',type:'收入',money:'',date:''},
filter_date:{start:'',end:''},
recent_day:7,
total:0
},
created:function(){
this.set_filter_date();
},
methods: {
add_uitem:function(){
this.usually_item.push({
name:this.add_detail.name,
type:this.add_detail.type
})
},
delete_uitem:function(index){
this.usually_item.splice(index, 1)
},
add: function () {
this.details.push({
name:this.add_detail.name,
type:this.add_detail.type,
money:this.add_detail.money,
date:this.add_detail.date
})
this.compute_total_detail();
},
set_add_detail:function(detail_name){
this.add_detail.name = detail_name;
this.add_detail.money = "";
},
delete_detail:function(index){
this.details.splice(index, 1)
this.compute_total_detail();
},
isNumber: function(evt) {//只能輸入數字
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
},
check_date:function(start_date,item_date,to_date){
if(start_date==="" || to_date==="")return true;
var sd = new Date(start_date).getTime();
var id = new Date(item_date).getTime();
var td = new Date(to_date).getTime();
if(sd <= id && td>=id)
return true;
},
set_filter_date:function(){
var today = new Date();
var day = new Date();
day.setDate(day.getDate() - this.recent_day);
var today_formate = this.date_formate(today);
var day_formate = this.date_formate(day);
this.filter_date.start = day_formate;
this.filter_date.end = today_formate;
this.compute_total_detail();
},
date_formate:function(date){
dd = date.getDate();
mm = date.getMonth() + 1;
y = date.getFullYear();
return y + '/' + mm + '/'+ dd;
},
clear_date:function(){
this.filter_date.start="";
this.filter_date.end="";
from.datepicker();
to.datepicker();
},
add_spend_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_spend){
if(this.total_spend[j].name == name){
check = false;
var money = detail.money;
this.total_spend[j].money += money;
}
}
if(check)this.total_spend.push({name:name,type:"支出",money:detail.money})
},
add_income_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_income){
if(this.total_income[j].name == name){
check = false;
var money = detail.money;
this.total_income[j].money += money;
}
}
if(check)this.total_income.push({name:name,type:"收入",money:detail.money})
},
compute_total_detail:function(){
this.total_income=[];
this.total_spend=[];
this.ts=0;
this.ti=0;
this.total=0;
var name="";
var check=true;
for(var i in this.details){
if(this.check_date(this.filter_date.start,this.details[i].date,this.filter_date.end)){
if(this.details[i].type=="收入"){
this.total += parseInt(this.details[i].money)
this.ti += parseInt(this.details[i].money)
this.add_income_array(this.details[i]);
}else{
this.add_spend_array(this.details[i]);
this.total -= parseInt(this.details[i].money)
this.ts += parseInt(this.details[i].money)
}
}
}
//計算百分比
var percent=0;
for(i in this.total_spend){
percent = ((this.total_spend[i].money / this.ts) * 100).toFixed(2)
this.total_spend[i].percent = percent;
}
for(i in this.total_income){
percent = ((this.total_income[i].money / this.ti)* 100).toFixed(2)
this.total_income[i].percent = percent;
}
}
}
})
$( function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd' });
var dateFormat = "yy/mm/dd",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
$(document).ready(function () {
$("#from").datepicker().on("change", function (e) {
app.$data.filter_date.start = $(this).val();
app.compute_total_detail();
});
$("#to").datepicker().on("change", function (e) {
app.$data.filter_date.end = $(this).val();
app.compute_total_detail();
});
$("#datepicker").datepicker().on("change", function (e) {
app.$data.add_detail.date = $(this).val();
});
});
</script></body>
</html>
Raw
jsbin.masunigayu.js
var filter_details=[];
Vue.component('u-item', {
props:['u_item'],
template: '<div v-on:click="add_add_detail()" class="u-item">{{u_item.name}} <input type="button" v-on:click="delete_add_detail()" value="x"></div>',
methods:{
add_add_detail:function(){
this.$emit('add_add_detail')
},
delete_add_detail:function(){
this.$emit('delete_add_detail')
}
}
})
var app = new Vue({
el: '#app',
data: {
usually_item:[
{name:'工作',type:'收入'},
{name:'吃飯',type:'支出'},
{name:'買生活用品',type:'支出'}
],
details: [
{ name: '買養樂多',type:'支出',money:10,date:"2017/09/10" },
{ name: '買原子筆',type:'支出',money:40,date:"2017/09/13" },
{ name: '買筆記本',type:'支出',money:100,date:"2017/09/15" },
{ name: '工作',type:'收入',money:150,date:"2017/09/15" },
{ name: '吃烏馬',type:'支出',money:1000,date:"2017/09/25" }
],
total_spend:[],
total_income:[],
ts:0,
ti:0,
add_detail:{name: '',type:'收入',money:'',date:''},
filter_date:{start:'',end:''},
recent_day:7,
total:0
},
created:function(){
this.set_filter_date();
},
methods: {
add_uitem:function(){
this.usually_item.push({
name:this.add_detail.name,
type:this.add_detail.type
})
},
delete_uitem:function(index){
this.usually_item.splice(index, 1)
},
add: function () {
this.details.push({
name:this.add_detail.name,
type:this.add_detail.type,
money:this.add_detail.money,
date:this.add_detail.date
})
this.compute_total_detail();
},
set_add_detail:function(detail_name){
this.add_detail.name = detail_name;
this.add_detail.money = "";
},
delete_detail:function(index){
this.details.splice(index, 1)
this.compute_total_detail();
},
isNumber: function(evt) {//只能輸入數字
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
},
check_date:function(start_date,item_date,to_date){
if(start_date==="" || to_date==="")return true;
var sd = new Date(start_date).getTime();
var id = new Date(item_date).getTime();
var td = new Date(to_date).getTime();
if(sd <= id && td>=id)
return true;
},
set_filter_date:function(){
var today = new Date();
var day = new Date();
day.setDate(day.getDate() - this.recent_day);
var today_formate = this.date_formate(today);
var day_formate = this.date_formate(day);
this.filter_date.start = day_formate;
this.filter_date.end = today_formate;
this.compute_total_detail();
},
date_formate:function(date){
dd = date.getDate();
mm = date.getMonth() + 1;
y = date.getFullYear();
return y + '/' + mm + '/'+ dd;
},
clear_date:function(){
this.filter_date.start="";
this.filter_date.end="";
from.datepicker();
to.datepicker();
},
add_spend_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_spend){
if(this.total_spend[j].name == name){
check = false;
var money = detail.money;
this.total_spend[j].money += money;
}
}
if(check)this.total_spend.push({name:name,type:"支出",money:detail.money})
},
add_income_array:function(detail){
var name = detail.name;
var check = true;
for(var j in this.total_income){
if(this.total_income[j].name == name){
check = false;
var money = detail.money;
this.total_income[j].money += money;
}
}
if(check)this.total_income.push({name:name,type:"收入",money:detail.money})
},
compute_total_detail:function(){
this.total_income=[];
this.total_spend=[];
this.ts=0;
this.ti=0;
this.total=0;
var name="";
var check=true;
for(var i in this.details){
if(this.check_date(this.filter_date.start,this.details[i].date,this.filter_date.end)){
if(this.details[i].type=="收入"){
this.total += parseInt(this.details[i].money)
this.ti += parseInt(this.details[i].money)
this.add_income_array(this.details[i]);
}else{
this.add_spend_array(this.details[i]);
this.total -= parseInt(this.details[i].money)
this.ts += parseInt(this.details[i].money)
}
}
}
//計算百分比
var percent=0;
for(i in this.total_spend){
percent = ((this.total_spend[i].money / this.ts) * 100).toFixed(2)
this.total_spend[i].percent = percent;
}
for(i in this.total_income){
percent = ((this.total_income[i].money / this.ti)* 100).toFixed(2)
this.total_income[i].percent = percent;
}
}
}
})
$( function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd' });
var dateFormat = "yy/mm/dd",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: dateFormat
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
$(document).ready(function () {
$("#from").datepicker().on("change", function (e) {
app.$data.filter_date.start = $(this).val();
app.compute_total_detail();
});
$("#to").datepicker().on("change", function (e) {
app.$data.filter_date.end = $(this).val();
app.compute_total_detail();
});
$("#datepicker").datepicker().on("change", function (e) {
app.$data.add_detail.date = $(this).val();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment