Quiero elegir la fecha usando el selector de fecha Jquery. Descargo el archivo de Keith-wood.name . Tiene tantos archivos js y archivos css. Me hace confundir. Entonces configuré el Jquery como se menciona en esa página. Pero no funciona.
Aquí está mi código:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="js/jquery-3.1.1.js"></script> <link href="css/w3.css" rel="stylesheet" /> <script src="js/jquery.calendars.plus.min.js"></script> <script src="js/jquery.calendars.islamic.min.js"></script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="txtHijriDate" runat="server"></asp:TextBox> <script> $('#txtHijriDate').calendarsPicker( { monthsToShow: [2, 3], showOtherMonths: true, onSelect: function (date) { alert('You picked ' + date[0].formatDate()); } }); $('#pickerButton').click(function () { try { var calendar = $.calendars.instance($('#pickerCal').val()); $('#defaultPicker').calendarsPicker('option', { calendar: calendar }). calendarsPicker('showMonth', parseInt($('#pickerYear').val(), 10), parseInt($('#pickerMonth').val(), 10)); } catch (e) { alert(e); } }); </script> </form> </body> </html>Cuando miro la consola.
Arroja un error en
Cannot read property 'regionalOptions' of undefined jquery.calendars.plus.min.jsy
Cannot read property 'baseCalendar' of undefined jquery.calendars.islamic.min.js
Estoy de acuerdo contigo, la documentación sobre keith-wood.name es un poco compleja y confusa.
Si echa un vistazo a la sección de Uso de la página jQuery Calendars Datepicker , verá que necesita importar los siguientes archivos:
jquery.min.js - la biblioteca jQueryjquery.calendars.jsjquery.calendars.plus.jsjquery.plugin.jsjquery.calendars.picker.jsjquery.calendars.picker.css (estilo predeterminado) Si tiene que mostrar un calendario islámico/hijri, debe agregar el archivo jquery.calendars.islamic.min.js y agregar la opción calendar: $.calendars.instance('islamic') en la función calendarsPicker .
Aquí una muestra de trabajo:
$('#txtHijriDate').calendarsPicker({ calendar: $.calendars.instance('islamic'), monthsToShow: [2, 3], showOtherMonths: true, onSelect: function (date) { alert('You picked ' + date[0].formatDate()); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script> <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script> <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script> <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script> <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script> <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet"/> <input type="text" id="txtHijriDate">Notas adicionales:
Si tiene que localizar su calendario islámico, puede agregar jquery.calendars.islamic-ar.js (localización árabe) o jquery.calendars.islamic-fa.js (localización farsi/persa).
Si necesita personalizar el estilo del selector de fecha, eche un vistazo a la pestaña Diseño/Estilo de esta página , muestra cómo agregar uno de los temas proporcionados (p. ej. redmond.calendars.picker.css ) y cómo funcionan junto con los temas de jQuery UI.
visite Datepicker Widget y vaya a localización y vea varias opciones
Ver también ejemplo de trabajo oficial
En la página, agregue este js que es para la localización.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
y en fragmento ver cómo inicializar idioma
$(function() { $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ar'], { //initialize language showButtonPanel: true, dateFormat: 'dd-mm-yy' })); }); <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="https://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> <input type="text" id="adverts_eventDate" />En la lista desplegable cerca de las palabras 'Seleccione una fecha de un calendario emergente o en línea', elija 'Árabe'. Si la funcionalidad que proporciona lista para usar está bien para su objetivo, entonces tal vez podría darle algunas instrucciones sobre cómo instalarlo. ^_^ Si las fechas islámicas requieren más ajustes y reglas complejas, entonces mi respuesta sería inútil.
conecte las bibliotecas en su página en este orden:
después de eso, puede usar la localización árabe. Lo invocas en un lugar donde dejaste tu
hazlo de esta manera
$(function() { $( "#datepicker" ).datepicker( $.datepicker.regional[ "ar" ] ); });entrada del selector de fecha
<input type="text" id="datepicker">