スタンドアロンピッカーとしてjQueryUIのUIDatePickerを使用しています。私はこのコードを持っています：
<div id="datepicker"></div>
そして次のJS：
$('#datepicker').datepicker();
このコードで値を返そうとすると、次のようになります。
var date = $('#datepicker').datepicker('getDate');
私はこれを返します：
2009年8月25日火曜日00:00:00GMT+ 0100（BST）
これは完全に間違った形式です。フォーマットで返される方法はありますDD-MM-YYYYか？
コードに固有の1つは次のとおりです。
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
ここで利用可能なより一般的な情報：
jQueryスクリプトコード内にコードを貼り付けるだけです。
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
これはうまくいくはずです。
datepickerのgetDateメソッドは、文字列ではなく、日付型を返します。
日付形式を使用して、戻り値を文字列にフォーマットする必要があります。datepickerのformatDate関数を使用します。
var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);
フォーマット指定子の完全なリストは、こちらから入手できます。
ここに、日付形式（yy / mm / dd）の日付ピッカーの完全なコードがあります。
以下のリンクをコピーして、ヘッドタグに貼り付けてください：
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
});
</script>
以下のコードをコピーして、bodyタグの間に貼り付けます。
Date: <input type="text" id="datepicker" size="30"/>
2つの入力タイプのテキストが必要な場合は、このスクリプトを使用して日付形式を変更してくださいStart Date。End Date
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
$("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
});
</script>
次のような2つの入力テキスト：
Start Date: <input type="text" id="startdate" size="30"/>
End Date: <input type="text" id="enddate" size="30"/>
解析および表示される日付の形式。この属性は、地域化属性の1つです。可能な形式の完全なリストについては、formatDate関数を参照してください。
コード例dateFormatオプションを指定してdatepickerを初期化します。
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });initの後で、dateFormatオプションを取得または設定します。
//getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
getDate関数はJavaScriptの日付を返します。この日付をフォーマットするには、次のコードを使用します。
var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);
これは、datepickerに組み込まれているユーティリティ関数を使用します。
$.datepicker.formatDate( format, date, settings )-日付を指定された形式の文字列値にフォーマットします。
フォーマット指定子の完全なリストは、こちらから入手できます。
$("#datepicker").datepicker("getDate")文字列ではなく、日付オブジェクトを返します。
var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
を使用してみてください
$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });
利用可能なオプションがたくさんあります日付ピッカーについては、ここで見つけることができます
http://api.jqueryui.com/datepicker/
これは、パラメータを使用して日付ピッカーを呼び出す方法です。
$(function() {
$('.selector').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
numberOfMonths: 1,
buttonImage: 'contact/calendar/calendar.gif',
buttonImageOnly: true,
onSelect: function(selectedDate) {
// we can write code here
}
});
});
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
yy-mm-dd形式の日付が必要な場合は、次を使用できます。-
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
サポートされているすべての形式を見つけることができます https://jqueryui.com/datepicker/#date-formats
私は2015年12月6日を必要としていました、私はこれをしました：-
$("#datepicker").datepicker({ dateFormat: "d M,y" });
このフォーマットは、次のように機能するだけで使用できます。
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true
});
});
<input type="text" id="datepicker"></p>
このHTMLページを実行するだけで、いくつかの形式を見ることができます。
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
これも機能します：
$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});
<script>
$(function() {
$("#datepicker").datepicker();
$('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
});
$("#startDate").datepicker({dateFormat: 'd MM y'});
</script>
私はdatepickerにjqueryを使用しています。これらのjqueriesはそのために使用されます
<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">
次に、このコードに従います。
<script>
jQuery(function() {
jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
これはスムーズに機能します。これを試して。
これらのリンクをヘッドセクションに貼り付けます。
<script src="http://code.jquery.com/jquery-1.9.1.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"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
以下はJSコーディングです。
<script>
$(document).ready(function () {
$('#completionDate').datepicker({
dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
changeMonth: true,
changeYear: true,
yearRange: "-50:+10",
clickInput: true,
onSelect: function (date) {
loadMusterChit();
}
});
});
</script>
だから私はこれに苦労し、私は怒っていると思いました。問題は、ブートストラップのdatepickerがjQueryではなく実装されていたため、オプションが異なることです。
$('.dateInput').datepicker({ format: 'dd/mm/yyyy'})
要素に日付ピッカーを設定するとinput[type="text"]、特にユーザーがデータ入力の日付形式に従わない場合、一貫した形式の日付が得られない可能性があります。
たとえば、dateFormatをとして設定しdd-mm-yy、ユーザーがを入力した場合1-1-1。datepickerはこれをJan 01, 2001内部的に変換val()しますが、datepickerオブジェクトを呼び出すと、文字列"1-1-1"（テキストフィールドにあるもの）が返されます。
これは、入力された日付が期待どおりの形式であることを確認するためにユーザー入力を検証するか、ユーザーが自由形式で日付を入力できないようにする必要があることを意味します（代わりにカレンダーピッカーを使用します）。それでも、datepickerコードに、期待どおりにフォーマットされた文字列を提供させることができます。
var picker = $('#datepicker');
picker.datepicker({ dateFormat: 'dd-mm-yy' });
picker.val( '1-1-1' ); // simulate user input
alert( picker.val() ); // "1-1-1"
var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );
alert( v ); // "01-01-2001"
ただし、datepickerのgetDate()メソッドは日付を返しますが、日付形式と完全に一致しないユーザー入力でのみ多くのことを実行できることに注意してください。これは、検証がない場合、ユーザーが期待するものとは異なる日付を取り戻すことができることを意味します。警告エンプター。
私のオプションは以下のとおりです。
$(document).ready(function () {
var userLang = navigator.language || navigator.userLanguage;
var options = $.extend({},
$.datepicker.regional["ja"], {
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
highlightWeek: true
}
);
$("#japaneseCalendar").datepicker(options);
});#ui-datepicker-div {
font-size: 14px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>
</body>
</html>次の方法で追加して試すことができます。
HTMLファイル：
<p><input type="text" id="demoDatepicker" /></p>
JavaScriptファイル：
$(function() {
$("#demoDatepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
constrainInput: false
});
});
私はこれを使用します：
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
20120118これは、の「 」のような形式の日付を返しますJan 18, 2012。
最後に、datepickerの日付変更方法の答えを得ました：
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
以下のコードは、フォームに複数の日付フィールドがあるかどうかを確認するのに役立つ場合があります。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.8.3.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
function pickDate(DateObject){
// alert(DateObject.name)
$(function() {
$("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
});
}
/*
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
*/
</script>
</head>
<body>
<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>
</body>
</html>
これを行う正しい方法は次のようになると思います。
var picker = $('.date-picker');
var date = $.datepicker.formatDate(
picker.datepicker('option', 'dateFormat'),
picker.datepicker('getDate'));
このようにして、フォーマット文字列が1回だけ定義されていることを確認し、同じフォーマッタを使用してフォーマット文字列をフォーマットされた日付に変換します。
これは、すぐに使用できる将来の保証日スニペットです。Firefoxのデフォルトはjqueryuidatepickerです。それ以外の場合は、HTML5日付ピッカーが使用されます。FFがHTML5type= "date"をサポートする場合、スクリプトは単に冗長になります。headタグには3つの依存関係が必要であることを忘れないでください。
<script>
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
<label for="date" class="col-sm-2 col-form-label"Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" id="date" placeholder="date">
</div>
</div>
<!--if the user is using FireFox it
autoconverts type='date' into type='text'. If the type is text the
script below will assign the jquery ui datepicker with options-->
<script>
$(function()
{
var elem = document.createElement('input');
elem.setAttribute('type', 'date');
if ( elem.type === 'text' )
{
$('#date').datepicker();
$( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
}
});
data-date-format="yyyy-mm-dd"単純なように、JQueryの入力フィールドhtmlと初期データピッカーで使用する必要があります
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
これは私のために働いたものです：
$.fn.datepicker.defaults.format = 'yy-mm-dd'
そのフォーマット「dd-mm-yy」が必要な場合は、Datepickerでdateformatを変更する必要があります。これは機能します...
$("#date").
({
dateFormar:'dd-mm-yy',
}).val();